@marigold/system 0.0.3 → 0.3.1

package/src/theme.ts

@@ -0,0 +1,157 @@
+import * as CSS from 'csstype';
+import { NestedScaleDict } from '@theme-ui/css';
+
+/**
+ * Value used to define a scale.
+ *
+ * Can be nested to support a default value.
+ *
+ * @example
+ * Given a theme
+ * ```
+ * {
+ *   colors: {
+ *     primary: { __default: '#00f', light: '#33f' }
+ *   }
+ * }
+ * ```
+ * `css{{ color: 'primary' }}` resolves to `color: #00f`.
+ */
+export type ScaleValue<T> = T | T[] | NestedScaleDict<T> | undefined;
+
+/**
+ * Scales are a set of named, pre-defined CSS values which are used
+ * to create consitency in sizing across visual elements. They give
+ * plain values semantics meaning.
+ *
+ * Marigold uses a plain object to define scales, where the key should be a
+ * descriptive name for the scale (e.g. `small`/`medium`/.. or `body`/`heading`/...),
+ * and the value is the CSS value.
+ */
+export type Scale<T> = {
+  [key: string]: ScaleValue<T>;
+};
+
+/**
+ * Predefined {@link Scale} scale which uses size values.
+ */
+export type SizeScale<T> = {
+  xxsmall?: ScaleValue<T>;
+  xsmall?: ScaleValue<T>;
+  small?: ScaleValue<T>;
+  medium?: ScaleValue<T>;
+  large?: ScaleValue<T>;
+  xlarge?: ScaleValue<T>;
+  xxlarge?: ScaleValue<T>;
+};
+
+/**
+ * A {@link SizeScale} that also includes a required `none` value, which is
+ * usually used to define the blank value (e.g `0`).
+ */
+export type ZeroScale<T> = {
+  none: ScaleValue<T>;
+} & Scale<T>;
+
+/**
+ * Base theme with typings for available scales properties.
+ */
+export interface Theme {
+  /**
+   * To configure the default breakpoints used in responsive array values,
+   * add a breakpoints array to your theme.
+   *
+   * Each breakpoint should be a string  with a CSS length unit included or a
+   * string including a CSS media query. String values with a CSS length unit
+   * will be used to generate a mobile-first (i.e. min-width) media query.
+   *
+   * @example
+   * ```ts
+   * {
+   *   breakpoints: [
+   *     '40em', '@media (min-width: 56em) and (orientation: landscape)', '64em',
+   *   ],
+   * }
+   * ```
+   */
+  breakpoints?: Array<string>;
+
+  colors?: Scale<CSS.Property.Color | NestedScaleDict<CSS.Property.Color>>;
+
+  /**
+   * Used to define a scale for whitspace values,
+   * like `padding`, `margin`, `gap`, etc.
+   */
+  space?: ZeroScale<CSS.Property.Margin<number | string>>;
+
+  /**
+   * Used to define a `font-size` scale.
+   */
+  fontSizes?: Scale<CSS.Property.FontSize<number>>;
+
+  /**
+   * Used to define a `font-family` scale.
+   */
+  fonts?: Scale<CSS.Property.FontFamily>;
+
+  /**
+   * Used to define a `font-weight` scale.
+   */
+  fontWeights?: Scale<CSS.Property.FontWeight>;
+
+  /**
+   * Used to define a `line-height` scale.
+   */
+  lineHeights?: Scale<CSS.Property.LineHeight<string | 0 | number>>;
+
+  /**
+   * Used to define a `letter-spacing` scale.
+   */
+  letterSpacings?: ZeroScale<CSS.Property.LetterSpacing<string | 0 | number>>;
+
+  /**
+   * Used to define a scale for size values,
+   * like `height`, `width`, `flexBasis`, etc.
+   */
+  sizes?: ZeroScale<CSS.Property.Height<{}> | CSS.Property.Width<{}>>;
+
+  /**
+   * Used to define different `border` styles.
+   */
+  borders?: ZeroScale<CSS.Property.Border<{}>>;
+
+  /**
+   * Used to define `border-style` styles.
+   */
+  borderStyles?: Scale<CSS.Property.Border<{}>>;
+
+  /**
+   * Used to define `border-width` styles.
+   */
+  borderWidths?: ZeroScale<CSS.Property.BorderWidth<string | 0 | number>>;
+
+  /**
+   * Used to define `border-radius` styles.
+   */
+  radii?: ZeroScale<CSS.Property.BorderRadius<string | 0 | number>>;
+
+  /**
+   * Used to define `Shadow` styles.
+   */
+  shadows?: ZeroScale<CSS.Property.BoxShadow>;
+
+  /**
+   * Used to define a `z-index` scake.
+   */
+  zIndices?: Scale<CSS.Property.ZIndex>;
+
+  /**
+   * Used to define a `opacity` scale.
+   */
+  opacities?: Scale<CSS.Property.Opacity>;
+
+  /**
+   * Used to define a `transition` styles.
+   */
+  transitions?: ZeroScale<CSS.Property.Transition>;
+}

package/src/types.ts

@@ -2,14 +2,13 @@
  * Create type aliases for `theme-ui` so that it doesn't leak too much into our code.
  */
 import {
-  Theme as ThemeUITheme,
   ThemeUIStyleObject,
   ThemeUICSSObject,
   ThemeUICSSProperties,
+  ResponsiveStyleValue as RSV,
 } from '@theme-ui/css';
-export { ResponsiveStyleValue } from '@theme-ui/css';
 
+export type ResponsiveStyleValue<T> = RSV<T>;
 export type StyleObject = ThemeUIStyleObject;
 export type CSSObject = ThemeUICSSObject;
 export type CSSProperties = ThemeUICSSProperties;
-export type Theme = ThemeUITheme;

package/src/useTheme.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { render, screen } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
 
@@ -11,6 +12,12 @@ const theme = {
     primary: 'hotpink',
     black: '#000',
   },
+  space: {
+    none: 0,
+    small: 16,
+    medium: 24,
+    large: 32,
+  },
   text: {
     body: {
       fontSize: 1,
@@ -27,24 +34,35 @@ const wrapper: React.FC = ({ children }) => (
   <ThemeProvider theme={theme}>{children}</ThemeProvider>
 );
 
-test('return theme', () => {
+test('returns the theme', () => {
+  const { result } = renderHook(() => useTheme(), { wrapper });
+  expect(result.current.theme).toEqual(theme);
+});
+
+test('returns a "css" function', () => {
   const { result } = renderHook(() => useTheme(), { wrapper });
-  expect(result.current).toMatchInlineSnapshot(`
-    Object {
-      "colors": Object {
-        "black": "#000",
-        "primary": "hotpink",
-      },
-      "text": Object {
-        "body": Object {
-          "color": "black",
-          "fontSize": 1,
-        },
-        "heading": Object {
-          "color": "primary",
-          "fontSize": 3,
-        },
-      },
+  expect(result.current.css).toEqual(expect.any(Function));
+});
+
+test('transpile style object to css object', () => {
+  const { result } = renderHook(() => useTheme(), { wrapper });
+  const css = result.current.css;
+
+  expect(css({ p: 'small' })).toMatchInlineSnapshot(`
+    {
+      "padding": 16,
+    }
+  `);
+  expect(css({ color: 'primary', p: 'large' })).toMatchInlineSnapshot(`
+    {
+      "color": "hotpink",
+      "padding": 32,
+    }
+  `);
+  expect(css({ variant: 'text.body' })).toMatchInlineSnapshot(`
+    {
+      "color": "#000",
+      "fontSize": 14,
     }
   `);
 });
@@ -63,7 +81,7 @@ test('themes can be cascaded', () => {
   };
 
   const Theme = ({ testId }: { testId: string }) => {
-    const theme = useTheme();
+    const { theme } = useTheme();
     return <div data-testid={testId}>{JSON.stringify(theme, null, 2)}</div>;
   };
 
@@ -96,3 +114,10 @@ test('themes can be cascaded', () => {
     }"
   `);
 });
+
+test('theme is passed down to emotion', () => {
+  const css = jest.fn().mockReturnValue({});
+  render(<ThemeProvider theme={theme}>{jsx('div', { css })}</ThemeProvider>);
+
+  expect(css).toHaveBeenCalledWith(theme);
+});

package/src/useTheme.tsx

@@ -1,12 +1,50 @@
-import React, { createContext, useContext } from 'react';
-import { Theme } from '@marigold/system';
+import React, {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+} from 'react';
+import { css as transformStyleObject } from '@theme-ui/css';
+import { ThemeProvider as EmotionProvider } from '@emotion/react';
 
-const Context = createContext<Theme>({});
+import { Theme } from './theme';
+import { StyleObject } from './types';
 
-export const useTheme = () => useContext(Context);
+/**
+ * @internal
+ */
+export const __defaultTheme: Theme = {};
 
-export type ThemeProviderProps = { theme: any };
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+const InternalContext = createContext<Theme>(__defaultTheme);
+
+export const useTheme = () => {
+  const theme = useContext(InternalContext);
+  /**
+   * We cast the theme here to `any` since our subset is not
+   * compatible with the typings of `theme-ui`, since they
+   * also support arrays as scale values, while we don't.
+   */
+  const css = useCallback(
+    (style: StyleObject) => transformStyleObject(style)(theme as any),
+    [theme]
+  );
+  return { theme, css };
+};
+
+export type ThemeProviderProps<T extends Theme> = {
+  theme: T;
+  children: ReactNode;
+};
+
+export function ThemeProvider<T extends Theme>({
   theme,
   children,
-}) => <Context.Provider value={theme}>{children}</Context.Provider>;
+}: ThemeProviderProps<T>) {
+  return (
+    <EmotionProvider theme={theme}>
+      <InternalContext.Provider value={theme}>
+        {children}
+      </InternalContext.Provider>
+    </EmotionProvider>
+  );
+}

package/src/variant.test.ts

@@ -0,0 +1,93 @@
+import {
+  appendVariantState,
+  conditional,
+  ensureArray,
+  ensureArrayVariant,
+  ensureVariantDefault,
+} from './variant';
+
+test('ensure array', () => {
+  expect(ensureArray('foo')).toEqual(['foo']);
+  expect(ensureArray(['foo'])).toEqual(['foo']);
+  expect(ensureArray(['foo', 'bar'])).toEqual(['foo', 'bar']);
+  expect(ensureArray(null)).toEqual([]);
+  expect(ensureArray(undefined)).toEqual([]);
+});
+
+test('ensure variant default', () => {
+  expect(ensureVariantDefault('foo.')).toEqual('foo');
+  expect(ensureVariantDefault('foo')).toEqual('foo');
+});
+
+test('ensure array of variants', () => {
+  expect(ensureArrayVariant('foo')).toEqual(['foo']);
+  expect(ensureArrayVariant(['foo'])).toEqual(['foo']);
+  expect(ensureArrayVariant(['foo', 'bar'])).toEqual(['foo', 'bar']);
+  expect(ensureArrayVariant(undefined)).toEqual([]);
+});
+
+test('append variant state', () => {
+  expect(appendVariantState('foo', 'checked')).toEqual('foo.:checked');
+  expect(appendVariantState('foo', 'focus')).toEqual('foo.:focus');
+  expect(appendVariantState('foo', 'disabled')).toEqual('foo.:disabled');
+});
+
+test('conditional variants', () => {
+  expect(
+    conditional('foo', {
+      checked: true,
+    })
+  ).toMatchInlineSnapshot(`
+    [
+      "foo",
+      "foo.:checked",
+    ]
+  `);
+
+  expect(
+    conditional('foo', {
+      checked: true,
+      focus: true,
+      disabled: true,
+    })
+  ).toMatchInlineSnapshot(`
+    [
+      "foo",
+      "foo.:checked",
+      "foo.:focus",
+      "foo.:disabled",
+    ]
+  `);
+
+  expect(
+    conditional('foo', {
+      checked: true,
+      focus: false,
+      disabled: true,
+    })
+  ).toMatchInlineSnapshot(`
+    [
+      "foo",
+      "foo.:checked",
+      "foo.:disabled",
+    ]
+  `);
+});
+
+test('disabled is always last state variant', () => {
+  const one = conditional('foo', {
+    disabled: true,
+    checked: true,
+    focus: true,
+  });
+
+  expect(one[one.length - 1]).toMatchInlineSnapshot(`"foo.:disabled"`);
+
+  const two = conditional('foo', {
+    checked: true,
+    disabled: true,
+    focus: true,
+  });
+
+  expect(two[two.length - 1]).toMatchInlineSnapshot(`"foo.:disabled"`);
+});

package/src/variant.ts

@@ -0,0 +1,54 @@
+const isNil = (value: any): value is null | undefined =>
+  value === null || value === undefined;
+
+/**
+ * Ensures that the `val` is an array. Will return an empty array if `val` is falsy.
+ */
+export const ensureArray = <T>(val?: T | T[]) =>
+  isNil(val) ? [] : Array.isArray(val) ? val : [val];
+
+/**
+ * Removes trailing dot from variant, if necessary. This is necessary to support
+ * `__default` styles. See https://github.com/system-ui/theme-ui/pull/951
+ */
+export const ensureVariantDefault = (val: string) => val.replace(/\.$/, '');
+
+/**
+ * Ensures that the `variant` is an array and supports the `__default` key.
+ */
+export const ensureArrayVariant = <T extends string>(variant?: T | T[]) =>
+  ensureArray(variant).map(ensureVariantDefault);
+
+export type State = {
+  checked?: boolean;
+  focus?: boolean;
+  hover?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+};
+
+/**
+ * Appends given `state` to a `variant`.
+ */
+export const appendVariantState = (variant: string, state: keyof State) => {
+  return `${ensureVariantDefault(variant)}.:${state}`;
+};
+
+/**
+ * Create a variant array from a `variant` and `state` containing
+ * passed states, if they are truthy.
+ */
+export const conditional = (
+  variant: string,
+  { disabled = false, ...states }: State
+) => {
+  const entries = [...Object.entries(states), ['disabled', disabled]] as [
+    keyof State,
+    boolean
+  ][];
+  const stateVariants = entries
+    .filter(([, val]) => Boolean(val))
+    .map(([key]) => appendVariantState(variant, key));
+
+  return [variant, ...stateVariants];
+};

package/dist/cache.d.ts

@@ -1,4 +0,0 @@
-/**
- * Expose cache from emotion so we can use the same cache when doing SSR.
- */
-export { cache } from '@emotion/css';

package/dist/reset.d.ts

@@ -1,24 +0,0 @@
-export declare const reset: {
-    readonly article: string;
-    readonly aside: string;
-    readonly details: string;
-    readonly figcaption: string;
-    readonly figure: string;
-    readonly footer: string;
-    readonly header: string;
-    readonly hgroup: string;
-    readonly menu: string;
-    readonly nav: string;
-    readonly section: string;
-    readonly ul: string;
-    readonly ol: string;
-    readonly blockquote: string;
-    readonly q: string;
-    readonly a: string;
-    readonly base: string;
-    readonly table: string;
-    readonly select: string;
-    readonly button: string;
-    readonly textarea: string;
-    readonly input: string;
-};

package/dist/useClassname.d.ts

@@ -1,2 +0,0 @@
-import { StyleObject } from './types';
-export declare const useClassname: (...styles: StyleObject[]) => string;

package/dist/useStyles.d.ts

@@ -1,15 +0,0 @@
-import { ElementType } from 'react';
-import { CSSObject } from './types';
-export declare type UseStyleInput = {
-    element?: ElementType;
-    css?: Omit<CSSObject, 'variant' | 'element'> & {
-        variant?: never;
-        element?: never;
-    };
-    variant?: string | string[];
-    className?: string;
-};
-/**
- * Hook that can adds base styles, reset for certain elements, variants and custom styles
- */
-export declare const useStyles: ({ element, css: styles, variant, className }: UseStyleInput) => string;