all: convert to es module

foundation: rename tokens to js-compatible names
foundation: rename typography keys to correct names
all: move react, tailwind, foundation to submodules
react: export external ambiance provider

.eslintrc.cjs

@@ -3,9 +3,6 @@ module.exports = {
   extends: ['@gameflow-tv/eslint-config'],
   plugins: ['@typescript-eslint'],
   parser: '@typescript-eslint/parser',
-  rules: {
-    'sort-keys': 'off',
-  },
   env: {
     browser: true,
     node: true,

package.json

@@ -2,10 +2,17 @@
   "name": "@gameflow-tv/flume",
   "version": "2.0.0",
   "description": "Web implementation of the Flume design system",
-  "type": "commonjs",
+  "type": "module",
   "main": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./foundation": "./dist/foundation.js",
+    "./react": "./dist/react.js",
+    "./tailwind": "./dist/tailwind.js"
+  },
   "files": [
-    "dist"
+    "dist",
+    "**.d.ts"
   ],
   "repository": {
     "type": "git",
@@ -21,25 +28,30 @@
   "scripts": {
     "build": "tsc --build --clean && tsup",
     "format": "prettier --write \"./**/*.{ts,tsx,js,jsx,json}\"",
+    "format:ci": "prettier \"./**/*.{ts,tsx,js,jsx,json}\" --check",
     "lint": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx,.mdx ./src",
+    "lint:ci": "eslint --ext .js,.jsx,.ts,.tsx,.mdx ./src",
     "watch": "npm run build -- --watch"
   },
   "devDependencies": {
-    "@gameflow-tv/eslint-config": "^0.0.6",
+    "@gameflow-tv/eslint-config": "^0.0.8",
     "@gameflow-tv/prettier-config": "^0.2.1",
-    "@types/node": "^18.0.0",
+    "@types/node": "^18.0.6",
     "@types/react": "^18.0.15",
-    "eslint": "^8.18.0",
+    "eslint": "^8.20.0",
     "prettier": "2.7.1",
-    "tailwindcss": "^3.1.3",
-    "tsup": "^6.1.2",
+    "tailwindcss": "^3.1.6",
+    "tsup": "^6.1.3",
     "typescript": "^4.7.4"
   },
-  "peerDependencies": {
+  "optionalDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "engines": {
-    "node": ">=16"
+    "node": ">=12"
+  },
+  "dependencies": {
+    "@gameflow-tv/ambiance": "^0.1.1"
   }
 }

src/foundation.ts

@@ -0,0 +1 @@
+export * from './foundation/index.js'

src/lib/foundation/gameflow.ts → src/foundation/gameflow.ts

@@ -1,13 +1,17 @@
-import { Screens } from './types/screens'
-import { Colors } from './types/colors'
-import { Motion } from './types/motion'
-import { Shadows } from './types/shadows'
-import { BorderRadius } from './types/borderRadius'
-import { Spacing } from './types/spacing'
-import { Typography } from './types/typography'
-import { palette } from './palette'
-import { Theme } from './types/theme'
-import { Animations } from './animations'
+/* eslint-disable quote-props */
+import {
+  Animations,
+  BorderRadius,
+  Colors,
+  Motion,
+  Screens,
+  Shadows,
+  Spacing,
+  Theme,
+  Typography,
+} from './types/index.js'
+
+import { palette } from './palette.js'
 
 export const motion: Motion = {
   short: '100ms',
@@ -26,30 +30,30 @@ export const shadows: Shadows = {
 
 export const colors: Colors = {
   primary: palette.amberOrange,
-  'on-primary': palette.abbeyBlue,
+  onPrimary: palette.abbeyBlue,
   secondary: palette.abbeyBlue,
   tertiary: palette.emperorGray,
   quaternary: palette.white,
   header: palette.white,
   body: palette.white85,
   subtitle: palette.white75,
   icon: palette.white85,
-  'button-focus': palette.white,
+  buttonFocus: palette.white,
   signal: palette.punchRed,
-  'on-signal': palette.white,
+  onSignal: palette.white,
   success: palette.ufoGreen,
-  'on-success': palette.parsleyGreen,
+  onSuccess: palette.parsleyGreen,
   warning: palette.lightningYellow,
-  'on-warning': palette.mustardYellow,
+  onWarning: palette.mustardYellow,
   error: palette.cinnabarRed,
-  'on-error': palette.faluRed,
+  onError: palette.faluRed,
   draw: palette.dustyGray,
-  'highlight-10': palette.white10,
-  'highlight-30': palette.white30,
+  highlight10: palette.white10,
+  highlight30: palette.white30,
   inactive: palette.white50,
-  'overlay-30': palette.black30,
-  'overlay-50': palette.black50,
-  'overlay-70': palette.black70,
+  overlay30: palette.black30,
+  overlay50: palette.black50,
+  overlay70: palette.black70,
   shadow: palette.black,
 }
 
@@ -61,14 +65,14 @@ export const borderRadius: BorderRadius = {
 }
 
 export const spacing: Spacing = {
-  '3xs': '2px',
-  '2xs': '4px',
+  xxxs: '2px',
+  xxs: '4px',
   xs: '8px',
   sm: '12px',
   md: '16px',
   lg: '24px',
   xl: '32px',
-  '2xl': '48px',
+  xxl: '48px',
 }
 
 const screens: Screens = {
@@ -78,53 +82,53 @@ const screens: Screens = {
   md: '48rem',
   lg: '62rem',
   xl: '75rem',
-  '2xl': '90rem',
+  xxl: '90rem',
 }
 
 export const typography: Typography = {
-  'header-xl': {
+  header1: {
     fontSize: '2.25rem',
     fontWeight: '600',
     lineHeight: '1.2',
     fontFamily: 'Montserrat',
   },
-  'header-lg': {
+  header2: {
     fontSize: '1.5rem',
     fontWeight: '600',
     lineHeight: '1.2',
     fontFamily: 'Montserrat',
   },
-  'header-md': {
+  header3: {
     fontSize: '1.125rem',
     fontWeight: '600',
     lineHeight: '1.2',
     fontFamily: 'Montserrat',
   },
-  'header-sm': {
+  header4: {
     fontSize: '1rem',
     fontWeight: '600',
     lineHeight: '1.2',
     fontFamily: 'Montserrat',
   },
-  'header-xs': {
+  header5: {
     fontSize: '0.875rem',
     fontWeight: '600',
     lineHeight: '1.2',
     fontFamily: 'Montserrat',
   },
-  'body-lg': {
+  body1: {
     fontSize: '0.875rem',
     fontWeight: '500',
     lineHeight: '1.3',
     fontFamily: 'Mulish, sans-serif, Helvetica',
   },
-  'body-md': {
+  body2: {
     fontSize: '0.75rem',
     fontWeight: '500',
     lineHeight: '1.3',
     fontFamily: 'Mulish, sans-serif, Helvetica',
   },
-  'body-sm': {
+  body3: {
     fontSize: '0.625rem',
     fontWeight: '500',
     lineHeight: '1.3',
@@ -142,16 +146,22 @@ export const typography: Typography = {
     lineHeight: '1.2',
     fontFamily: 'Montserrat',
   },
-  'label-md': {
+  label1: {
     fontSize: '0.75rem',
     fontWeight: '500',
-    lineHeight: '1.0',
+    lineHeight: '1.2',
     fontFamily: 'Montserrat',
   },
-  'label-sm': {
+  label2: {
+    fontSize: '0.6875rem',
+    fontWeight: '500',
+    lineHeight: '1.2',
+    fontFamily: 'Montserrat',
+  },
+  label3: {
     fontSize: '0.625rem',
     fontWeight: '500',
-    lineHeight: '1.0',
+    lineHeight: '1.2',
     fontFamily: 'Montserrat',
   },
 }

src/foundation/index.ts

@@ -0,0 +1,2 @@
+export * from './gameflow.js'
+export * from './types/index.js'

src/lib/foundation/animations.ts → src/foundation/types/animations.ts

@@ -1,3 +1,3 @@
-import { Motion } from './types/motion'
+import { Motion } from './motion.js'
 
 export type Animations = Omit<Motion, 'curve'>

src/lib/foundation/types/colors.ts → src/foundation/types/colors.ts

@@ -15,7 +15,7 @@ export interface Colors {
   /**
    * Contrast color to the primary color.
    */
-  'on-primary': string
+  onPrimary: string
 
   /**
    * Complementary color to the primary color.
@@ -55,7 +55,7 @@ export interface Colors {
   /**
    * Color for button borders when focused.
    */
-  'button-focus': string
+  buttonFocus: string
 
   /**
    * Sharp, bright signaling color that contrasts most of the other colors.
@@ -64,7 +64,7 @@ export interface Colors {
   /**
    * Contrast color to the signal color.
    */
-  'on-signal': string
+  onSignal: string
 
   /**
    * Color signaling success or positive outcome.
@@ -73,7 +73,7 @@ export interface Colors {
   /**
    * Contrast color to the success color.
    */
-  'on-success': string
+  onSuccess: string
 
   /**
    * Color signaling warning or caution.
@@ -83,7 +83,7 @@ export interface Colors {
   /**
    * Contrast color to the warning color.
    */
-  'on-warning': string
+  onWarning: string
 
   /**
    * Color signaling error or negative outcome.
@@ -93,7 +93,7 @@ export interface Colors {
   /**
    * Contrast color to the error color.
    */
-  'on-error': string
+  onError: string
 
   /**
    * Neutral, dull color for neutral outcomes.
@@ -103,12 +103,12 @@ export interface Colors {
   /**
    * Subtle highlight color (overlay).
    */
-  'highlight-10': string
+  highlight10: string
 
   /**
    * Stronger highlight color (overlay).
    */
-  'highlight-30': string
+  highlight30: string
 
   /**
    * Color signaling inactive/disabled states.
@@ -118,17 +118,17 @@ export interface Colors {
   /**
    * Subtle dim overlay (overlay).
    */
-  'overlay-30': string
+  overlay30: string
 
   /**
    * Stronger dim overlay (overlay).
    */
-  'overlay-50': string
+  overlay50: string
 
   /**
    * Strongest dim overlay (overlay).
    */
-  'overlay-70': string
+  overlay70: string
 
   /**
    * Base color for shadows.

src/foundation/types/index.ts

@@ -0,0 +1,9 @@
+export * from './borderRadius.js'
+export * from './colors.js'
+export * from './motion.js'
+export * from './shadows.js'
+export * from './spacing.js'
+export * from './theme.js'
+export * from './typography.js'
+export * from './screens.js'
+export * from './animations.js'

src/lib/foundation/types/screens.ts → src/foundation/types/screens.ts

@@ -35,7 +35,7 @@ export interface Screens {
    */
   xl: string
   /**
-   * Extra LArge screen size.
+   * Extra Large screen size.
    */
-  '2xl': string
+  xxl: string
 }

src/lib/foundation/types/spacing.ts → src/foundation/types/spacing.ts

@@ -10,12 +10,12 @@ export interface Spacing {
   /**
    * The smallest spacing, used for incremental and very minor gaps.
    */
-  '3xs': string
+  xxxs: string
 
   /**
    * A very small spacing, used for incremental and very minor gaps.
    */
-  '2xs': string
+  xxs: string
 
   /**
    * A small spacing, used for incremental and minor gaps.
@@ -45,5 +45,5 @@ export interface Spacing {
   /**
    * Spacing used for huge gaps and paddings.
    */
-  '2xl': string
+  xxl: string
 }