Palettes

src/bases/config/flex.ts

@@ -14,5 +14,18 @@ export const flexConfig: Config = {
   flexBasis: true,
   justifySelf: true,
   alignSelf: true,
-  order: true
+  order: true,
+  // aliases
+  direction: {
+    property: 'flexDirection'
+  },
+  align: {
+    property: 'alignItems'
+  },
+  justify: {
+    property: 'justifyContent'
+  },
+  wrap: {
+    property: 'flexWrap'
+  }
 };

src/bases/config/layout.ts

@@ -34,5 +34,31 @@ export const layoutConfig: Config = {
   overflowX: true,
   overflowY: true,
   display: true,
-  verticalAlign: true
+  verticalAlign: true,
+  // aliases
+  w: {
+    property: 'width',
+    scale: 'sizes',
+    transform: getWidth
+  },
+  h: {
+    property: 'height',
+    scale: 'sizes'
+  },
+  minW: {
+    property: 'minWidth',
+    scale: 'sizes'
+  },
+  minH: {
+    property: 'minHeight',
+    scale: 'sizes'
+  },
+  maxW: {
+    property: 'maxWidth',
+    scale: 'sizes'
+  },
+  maxH: {
+    property: 'maxHeight',
+    scale: 'sizes'
+  }
 };

src/bases/types.ts

@@ -61,8 +61,16 @@ export type BoxBaseProps =
     WebkitTapHighlightColor?: system.ResponsiveValue<CSS.WebkitTapHighlightColorProperty>;
 
     // Aliases
-    column?: ResponsiveValue<CSS.GridColumnProperty>;
-    row?: ResponsiveValue<CSS.GridRowProperty>;
+    column?: system.GridColumnProps['gridColumn'];
+    row?: system.GridRowProps['gridRow'];
+
+    w: system.LayoutProps['width'];
+    maxW: system.LayoutProps['maxWidth'];
+    minW: system.LayoutProps['minWidth'];
+
+    h: system.LayoutProps['height'];
+    maxH: system.LayoutProps['maxHeight'];
+    minH: system.LayoutProps['minHeight'];
 
     theme?: XcoreTheme;
   }
@@ -92,6 +100,12 @@ export type GlobalBaseProps = {
 } & BoxBaseProps;
 
 export type FlexBaseProps =
+  {
+    direction?: system.FlexboxProps['flexDirection'];
+    align?: system.FlexboxProps['alignItems'];
+    justify?: system.FlexboxProps['justifyContent'];
+    wrap?: system.FlexboxProps['flexWrap'];
+  }
   & system.FlexboxProps
   & BoxBaseProps;
 

src/components/Button/theme.ts

@@ -1,6 +1,7 @@
-import { ButtonProps } from '.';
+import { darken, transparentize } from 'scales/colors';
 import { mergeThemes } from 'utils/mergeThemes';
-import { darken, opacify } from 'scales/colors';
+
+import { ButtonProps } from '.';
 
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 export type ButtonVariant = 'solid' | 'clear' | 'outline' | 'link';
@@ -89,13 +90,13 @@ const emptyButton: ButtonValue = {
     clear: {
       color: 'primary',
       _hover: {
-        bg: opacify('primary', 0.1)
+        bg: transparentize('primary', 0.9)
       },
       _active: {
-        bg: opacify('primary', 0.2)
+        bg: transparentize('primary', 0.8)
       },
       _focus: {
-        bg: opacify('primary', 0.2),
+        bg: transparentize('primary', 0.8),
         outline: '2px solid rgba(15, 31, 40, 0.2)',
         outlineOffset: '-2px'
       },
@@ -108,13 +109,13 @@ const emptyButton: ButtonValue = {
       borderColor: 'primary',
       color: 'primary',
       _hover: {
-        bg: opacify('primary', 0.1)
+        bg: transparentize('primary', 0.9)
       },
       _active: {
-        bg: opacify('primary', 0.2)
+        bg: transparentize('primary', 0.8)
       },
       _focus: {
-        bg: opacify('primary', 0.2),
+        bg: transparentize('primary', 0.8),
         outline: '2px solid rgba(15, 31, 40, 0.2)',
         outlineOffset: '-2px'
       },

src/components/Card/theme.ts

@@ -1,5 +1,6 @@
 import { CardProps } from '.';
 import { mergeThemes } from 'utils/mergeThemes';
+import { transparentize } from '../../scales/colors';
 
 export type CardVariant = 'normal' | 'elevated' | 'outline';
 
@@ -37,7 +38,8 @@ const emptyCard: CardValue = {
       boxShadow: '0 0.3rem 0.8rem 0 rgba(36, 49, 70, 0.25)'
     },
     outline: {
-      border: '1px solid rgba(69, 86, 99, 0.5)'
+      border: '1px solid',
+      borderColor: transparentize('gray.700', 0.5)
     }
   }
 };

src/components/CloseControl/theme.ts

@@ -1,5 +1,6 @@
 import { CloseControlProps } from '.';
 import { mergeThemes } from 'utils/mergeThemes';
+import { darken } from 'scales/colors';
 
 export type CloseControlSizes = 'xs' | 'sm' | 'md' | 'lg';
 

src/components/Flex.ts

@@ -8,6 +8,7 @@ export type ExtendedFlexProps = FlexProps;
 const Flex = styled.div.withConfig<FlexProps>({ shouldForwardProp })`
   ${composedFlexBase}
 `;
+
 Flex.displayName = 'Flex';
 
 export default Flex;

src/components/Tag/theme.ts

@@ -21,7 +21,8 @@ export const tag = (t?: {
 const emptyTag: TagValue = {
   default: {
     borderRadius: '0.3rem',
-    border: '1px solid #455663',
+    border: '1px solid',
+    borderColor: 'gray.700',
     px: '0.8rem',
     fontFamily: 'text',
     fontSize: '1.2rem',

src/components/Typography/index.tsx

@@ -20,9 +20,9 @@ export type ExtendedTypographyProps =
 
 const Typography = forwardRef<HTMLDivElement, ExtendedTypographyProps>(({ as: _as, ...p }, ref) => {
   const { typography } = useTheme();
-  const type = p.variant ?? p.v ?? 'p';
+  const type = p.variant ?? p.v;
 
-  const as: TypographyAs = _as ?? (type === 'lead' ? 'p' : type);
+  const as: TypographyAs | undefined = _as ?? (type === 'lead' ? 'p' : type);
 
   const props = useMerge(
     p,
@@ -37,6 +37,6 @@ const Typography = forwardRef<HTMLDivElement, ExtendedTypographyProps>(({ as: _a
 
 export default Typography;
 
-const TypographyStyle = styled.p.withConfig<TypographyProps>({ shouldForwardProp })`
+const TypographyStyle = styled.div.withConfig<TypographyProps>({ shouldForwardProp })`
   ${composedTextBase}
 `;

src/scales/colors.ts

@@ -1,11 +1,14 @@
 import { defaultsScale } from './utils';
 import { get } from '@styled-system/core';
 import * as polished from 'polished';
+import { Palette, palette } from 'utils/palette';
 
 export type Colors = {
   primary: string;
   text: string;
   background: string;
+
+  gray: Palette;
 };
 
 export type ColorScale = {
@@ -18,13 +21,17 @@ export const colors = <T extends {}>(base: Colors = lightColorTheme, c: T & Part
 export const lightColorTheme: Colors = {
   primary: '#0171b6',
   text: '#1E3441',
-  background: '#fff'
+  background: '#fff',
+
+  gray: palette('#596e7f')
 };
 
 export const darkColorTheme: Colors = {
   primary: '#DAA520',
   text: '#fff',
-  background: '#211E15'
+  background: '#211E15',
+
+  gray: palette('#698396', -0.4)
 };
 
 export const colorMod = (func: string) => (color: string, amount: number) => `__$${func};${color};${amount}`;
@@ -50,7 +57,7 @@ export const colorTransform = (val: string | number, s: any) => {
     if (reg) {
       const [_, func, color, amount] = reg;
       const a = Number(amount);
-      const value = get<string>(scale, color, lightColorTheme[color as keyof Colors] || color);
+      const value = get<string>(scale, color, color);
 
       switch (func) {
         case 'darken':
@@ -74,7 +81,7 @@ export const colorTransform = (val: string | number, s: any) => {
       }
     }
 
-    return get(scale, val, lightColorTheme[val as keyof Colors] || val);
+    return get(scale, val, val);
   }
-  return get(scale, val, lightColorTheme[val as keyof Colors] || val);
+  return get(scale, val, val);
 };

src/utils/palette.ts

@@ -0,0 +1,20 @@
+import * as polished from 'polished';
+
+export type Palette = Record<50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900, string>;
+
+export const palette = (
+  base500: string,
+  m: number = 0.4,
+  func: (a: number, v: string) => string = polished.lighten
+) => ({
+  50: func(m * 0.45, base500),
+  100: func(m * 0.4, base500),
+  200: func(m * 0.3, base500),
+  300: func(m * 0.2, base500),
+  400: func(m * 0.1, base500),
+  500: base500,
+  600: func(m * -0.1, base500),
+  700: func(m * -0.2, base500),
+  800: func(m * -0.3, base500),
+  900: func(m * -0.4, base500)
+});

src/utils/trace.ts

@@ -0,0 +1,4 @@
+export const trace = <T>(a: T, ...rest: any[]) => {
+  console.info(a, ...rest);
+  return a;
+};

stories/Box.stories.tsx

@@ -1,6 +1,8 @@
-import React, { FC } from 'react';
+import React, { FC, useState, useMemo } from 'react';
 
-import { Box } from '../src';
+import { Box, createScales } from '../src';
+import { emptyTheme, createTheme } from '../src/theme';
+import { darkColorTheme, colors } from '../src/scales/colors';
 
 export default { title: 'Box' };
 
@@ -45,3 +47,40 @@ export const BasicUsage: FC = () => {
     </Box>
   );
 };
+
+export const Colors: FC = () => {
+  const [dark, setDark] = useState(false);
+  const theme = useMemo(() =>
+    dark
+      ? createTheme({
+        ...createScales({
+          ...colors(darkColorTheme)
+        })
+      })
+      : createTheme(), [dark]);
+
+  return (
+    <Box>
+      <Box as="button" onClick={() => setDark(s => !s)}>Switch theme</Box>
+      <br />
+
+      Primary
+      <Box width="64px" height="64px" bg={theme.colors.primary} mb="10px" color="background">
+        {theme.colors.primary}
+      </Box>
+
+      Background
+      <Box width="64px" height="64px" bg={theme.colors.background} mb="10px">{theme.colors.background}</Box>
+
+      Text
+      <Box width="64px" height="64px" bg={theme.colors.text} mb="10px" color="background">{theme.colors.text}</Box>
+
+      Gray
+      <Box display="flex">
+        {Object.values(theme.colors.gray).map(c =>
+          <Box key={c} width="64px" height="64px" bg={c} color="background">{c}</Box>
+        )}
+      </Box>
+    </Box>
+  );
+};