@charcoal-ui/theme 5.0.0-beta.3 → 5.0.0-beta.4

package/src/default.ts

@@ -1,167 +1,203 @@
-import rgba from 'polished/lib/color/rgba'
+/** This file is auto generated. DO NOT EDIT BY HAND. */
 import { CharcoalTheme } from './theme'
-import {
-  BORDER_RADIUS,
-  BREAKPOINT,
-  COLUMN_UNIT,
-  GUTTER_UNIT,
-  SPACING,
-  TYPOGRAPHY_SIZE,
-} from '@charcoal-ui/foundation'
-import { applyEffect } from '@charcoal-ui/utils'
-
-const outlineEffect = {
-  type: 'opacity',
-  opacity: 0.32,
-} as const
-
-const assertive = '#ff2b00'
-const brand = '#0096fa'
-const borderForLight = rgba('#000000', 0.08)
-const borderForDark = rgba('#ffffff', 0.12)
 
 const common = {
-  typography: {
-    size: TYPOGRAPHY_SIZE,
+  borderRadius: {
+    '4': 4,
+    '8': 8,
+    '16': 16,
+    '24': 24,
+    none: 0,
+    oval: 999999,
   },
-  spacing: SPACING,
-  grid: {
-    unit: {
-      column: COLUMN_UNIT,
-      gutter: GUTTER_UNIT,
-    },
+  breakpoint: {
+    screen1: 744,
+    screen2: 952,
+    screen3: 1160,
+    screen4: 1368,
   },
-  borderRadius: BORDER_RADIUS,
-  transition: {
-    default: {
-      duration: 0.2,
+  elementEffect: {
+    disabled: {
+      opacity: 0.32,
+      type: 'opacity',
     },
   },
-  breakpoint: {
-    screen1: BREAKPOINT[6],
-    screen2: BREAKPOINT[8],
-    screen3: BREAKPOINT[10],
-    screen4: BREAKPOINT[12],
-  },
   gradientColor: {
-    surface5: [
-      { color: rgba('#000000', 0.32), ratio: 0 },
-      { color: rgba('#000000', 0), ratio: 100 },
-    ],
     callToAction: [
-      { color: '#d1ff1a', ratio: 0 },
-      { color: '#1ad1ff', ratio: 100 },
+      {
+        color: '#d1ff1a',
+        ratio: 0,
+      },
+      {
+        color: '#1ad1ff',
+        ratio: 100,
+      },
+    ],
+    surface5: [
+      {
+        color: 'rgba(0,0,0,0.32)',
+        ratio: 0,
+      },
+      {
+        color: 'rgba(0,0,0,0)',
+        ratio: 100,
+      },
     ],
   },
+  grid: {
+    unit: {
+      column: 80,
+      gutter: 24,
+    },
+  },
   outline: {
-    default: {
-      color: applyEffect(brand, outlineEffect),
+    assertive: {
+      color: 'rgba(255,43,0,0.32)',
       weight: 4,
     },
-    assertive: {
-      color: applyEffect(assertive, outlineEffect),
+    default: {
+      color: 'rgba(0,150,250,0.32)',
       weight: 4,
     },
   },
-  elementEffect: {
-    disabled: {
-      type: 'opacity',
-      opacity: 0.32,
+  spacing: {
+    '0': 0,
+    '4': 4,
+    '8': 8,
+    '16': 16,
+    '24': 24,
+    '40': 40,
+    '64': 64,
+    '104': 104,
+    '168': 168,
+    '272': 272,
+    '440': 440,
+  },
+  transition: {
+    default: {
+      duration: 0.2,
+    },
+  },
+  typography: {
+    size: {
+      '12': {
+        fontSize: 12,
+        lineHeight: 20,
+      },
+      '14': {
+        fontSize: 14,
+        lineHeight: 22,
+      },
+      '16': {
+        fontSize: 16,
+        lineHeight: 24,
+      },
+      '20': {
+        fontSize: 20,
+        lineHeight: 28,
+      },
+      '32': {
+        fontSize: 32,
+        lineHeight: 40,
+      },
     },
   },
 } as const
 
 export const light: CharcoalTheme = {
   ...common,
-  effect: {
-    hover: {
-      type: 'alpha',
-      color: rgba('#000000', 0.04), // surface3
+  ...{
+    border: {
+      default: {
+        color: 'rgba(0,0,0,0.08)',
+      },
     },
-    press: {
-      type: 'alpha',
-      color: rgba('#000000', 0.16), // surface10
+    color: {
+      assertive: '#ff2b00',
+      background1: '#ffffff',
+      background2: '#f5f5f5',
+      border: 'rgba(0,0,0,0.08)',
+      brand: '#0096fa',
+      icon6: 'rgba(255,255,255,0.28)',
+      link1: '#3d7699',
+      link2: 'rgba(255,255,255,0.36)',
+      success: '#b1cc29',
+      surface1: '#ffffff',
+      surface10: 'rgba(0,0,0,0.16)',
+      surface2: 'rgba(0,0,0,0.02)',
+      surface3: 'rgba(0,0,0,0.04)',
+      surface4: 'rgba(0,0,0,0.32)',
+      surface6: 'rgba(0,0,0,0.88)',
+      surface7: 'rgba(0,0,0,0.02)',
+      surface8: 'rgba(0,0,0,0.88)',
+      surface9: '#ffffff',
+      text1: '#1f1f1f',
+      text2: '#474747',
+      text3: '#858585',
+      text4: '#adadad',
+      text5: '#ffffff',
+      transparent: 'rgba(0,0,0,0)',
+      updatedItem: 'rgba(0,150,250,0.04)',
+      warning: '#ffaf0f',
     },
-  },
-  color: {
-    // TODO: colors should be picked from foundation color palette
-    transparent: rgba('#000000', 0),
-    background1: '#ffffff',
-    background2: '#f5f5f5',
-    icon6: rgba('#ffffff', 0.28),
-    link1: '#3d7699',
-    link2: rgba('#ffffff', 0.36),
-    surface1: '#ffffff',
-    surface2: rgba('#000000', 0.02),
-    surface3: rgba('#000000', 0.04),
-    surface4: rgba('#000000', 0.32),
-    surface6: rgba('#000000', 0.88),
-    surface7: rgba('#000000', 0.02),
-    surface8: rgba('#000000', 0.88),
-    surface9: '#ffffff',
-    surface10: rgba('#000000', 0.16),
-    text1: '#1f1f1f',
-    text2: '#474747',
-    text3: '#858585',
-    text4: '#adadad',
-    text5: '#ffffff',
-    brand,
-    assertive,
-    warning: '#ffaf0f',
-    success: '#b1cc29',
-    updatedItem: rgba(0, 150, 250, 0.04),
-    border: borderForLight,
-  },
-  border: {
-    default: {
-      color: borderForLight,
+    effect: {
+      hover: {
+        color: 'rgba(0,0,0,0.04)',
+        type: 'alpha',
+      },
+      press: {
+        color: 'rgba(0,0,0,0.16)',
+        type: 'alpha',
+      },
     },
   },
 }
 
 export const dark: CharcoalTheme = {
   ...common,
-  effect: {
-    hover: {
-      type: 'alpha',
-      color: rgba('#ffffff', 0.12), // surface3
+  ...{
+    border: {
+      default: {
+        color: 'rgba(255,255,255,0.12)',
+      },
     },
-    press: {
-      type: 'alpha',
-      color: rgba('#ffffff', 0.2), // surface10
+    color: {
+      assertive: '#ff2b00',
+      background1: '#1f1f1f',
+      background2: '#000000',
+      border: 'rgba(255,255,255,0.12)',
+      brand: '#0096fa',
+      icon6: 'rgba(255,255,255,0.28)',
+      link1: '#669FC2',
+      link2: 'rgba(255,255,255,0.36)',
+      success: '#b1cc29',
+      surface1: '#1f1f1f',
+      surface10: 'rgba(255,255,255,0.2)',
+      surface2: 'rgba(0,0,0,0.16)',
+      surface3: 'rgba(255,255,255,0.12)',
+      surface4: 'rgba(0,0,0,0.32)',
+      surface6: 'rgba(255,255,255,0.12)',
+      surface7: 'rgba(0,0,0,0)',
+      surface8: 'rgba(0,0,0,0.88)',
+      surface9: '#333333',
+      text1: '#f5f5f5',
+      text2: '#d6d6d6',
+      text3: '#858585',
+      text4: '#5c5c5c',
+      text5: '#f5f5f5',
+      transparent: 'rgba(0,0,0,0)',
+      updatedItem: 'rgba(0,150,250,0.12)',
+      warning: '#ffaf0f',
     },
-  },
-  color: {
-    transparent: rgba('#000000', 0),
-    background1: '#1f1f1f',
-    background2: '#000000',
-    icon6: light.color.icon6,
-    link1: '#669FC2',
-    link2: light.color.link2,
-    surface1: '#1f1f1f',
-    surface2: rgba('#000000', 0.16),
-    surface3: rgba('#ffffff', 0.12),
-    surface4: light.color.surface4,
-    surface6: rgba('#ffffff', 0.12),
-    surface7: rgba('#000000', 0),
-    surface8: light.color.surface8,
-    surface9: '#333333',
-    surface10: rgba('#ffffff', 0.2),
-    text1: '#f5f5f5',
-    text2: '#d6d6d6',
-    text3: '#858585',
-    text4: '#5c5c5c',
-    text5: '#f5f5f5',
-    brand,
-    assertive,
-    warning: light.color.warning,
-    success: light.color.success,
-    updatedItem: rgba(0, 150, 250, 0.12),
-    border: borderForDark,
-  },
-  border: {
-    default: {
-      color: borderForDark,
+    effect: {
+      hover: {
+        color: 'rgba(255,255,255,0.12)',
+        type: 'alpha',
+      },
+      press: {
+        color: 'rgba(255,255,255,0.2)',
+        type: 'alpha',
+      },
     },
   },
 }