@marigold/system 0.3.0 → 0.4.0

package/src/SVG.test.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { SVG } from './SVG';
-
-test('renders svg', () => {
-  render(<SVG data-testid="svg" />);
-  const svg = screen.getByTestId('svg');
-  expect(svg instanceof SVGElement).toBeTruthy();
-});
-
-test('normalizes <svg>', () => {
-  render(<SVG data-testid="svg" />);
-  const svg = screen.getByTestId('svg');
-  expect(svg).toHaveStyle('display: block');
-  expect(svg).toHaveStyle('max-width: 100%');
-});
-
-test('supports default fill color', () => {
-  render(
-    <SVG data-testid="svg">
-      <path d="M9.9 20.113V13.8415H14" />
-    </SVG>
-  );
-  const svg = screen.getByTestId(/svg/);
-
-  expect(svg.getAttribute('fill')).toEqual('currentcolor');
-});
-
-test('supports default size', () => {
-  render(
-    <SVG data-testid="svg">
-      <path d="M9.9 20.113V13.8415H14" />
-    </SVG>
-  );
-  const svg = screen.getByTestId(/svg/);
-
-  expect(svg.getAttribute('width')).toEqual('24');
-});
-
-test('supports size prop', () => {
-  render(
-    <SVG data-testid="svg" size={30}>
-      <path d="M9.9 20.113V13.8415H14" />
-    </SVG>
-  );
-  const svg = screen.getByTestId(/svg/);
-
-  expect(svg.getAttribute('width')).toEqual('30');
-});
-
-test('supports fill prop', () => {
-  render(
-    <SVG data-testid="svg" fill="#fafafa">
-      <path d="M9.9 20.113V13.8415H14" />
-    </SVG>
-  );
-  const svg = screen.getByTestId(/svg/);
-
-  expect(svg.getAttribute('fill')).toEqual('#fafafa');
-});
-
-test('accepts custom styles prop className', () => {
-  render(
-    <SVG data-testid="svg" className="custom-class-name">
-      <path d="M9.9 20.113V13.8415H14" />
-    </SVG>
-  );
-  const svg = screen.getByTestId(/svg/);
-
-  expect(svg.getAttribute('class')).toMatch(/custom-class-name/);
-});
-
-test('renders <svg> element', () => {
-  render(
-    <SVG data-testid="svg">
-      <path d="M9.9 20.113V13.8415H14" />
-    </SVG>
-  );
-  const svg = screen.getByTestId(/svg/);
-
-  expect(svg instanceof SVGElement).toBeTruthy();
-});

package/src/SVG.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { jsx } from '@emotion/react';
-import { ComponentProps } from '@marigold/types';
-import { getNormalizedStyles } from '@marigold/system';
-
-const css = getNormalizedStyles('svg');
-
-export type SVGProps = {
-  size?: number;
-} & ComponentProps<'svg'>;
-
-export const SVG: React.FC<SVGProps> = ({ size = 24, children, ...props }) =>
-  jsx(
-    'svg',
-    {
-      width: size,
-      height: size,
-      viewBox: '0 0 24 24',
-      fill: 'currentcolor',
-      ...props,
-      css,
-    },
-    children
-  );

package/src/concepts-principles.mdx

@@ -1,84 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Guides/Concepts & Principles" />
-
-## Design Tokens
-
-The term _design tokens_ originates from the [Lightning Design System](https://www.lightningdesignsystem.com/design-tokens/). They are the "visual design atoms" of a design system. Similar to variables in CSS or Sass, design tokens are used to capture low-level values and then used to create the look and feel of your product. This helps with maintaining a consistent and scalable visual system for UI development.
-
-```css
-/* button.css */
-.button {
-  color: #1f1235;
-  background: #ff6e6c;
-  height: 24px;
-}
-```
-
-```scss
-/* colors.scss */
-$color-primary: #ff6e6c;
-$color-text: #1f1235;
-
-/* sizes.scss */
-$size-6: 24px;
-
-/* button.scss */
-.button {
-  color: $color-text;
-  background: $color-primary;
-  height: $size-6;
-}
-```
-
-_Read more:_
-
-- [Lightning Design System: Design Tokens](https://www.lightningdesignsystem.com/design-tokens/)
-- [CSS Tricks: What are Design Tokens?](https://css-tricks.com/what-are-design-tokens/)
-
-## Rhythm & Harmony
-
-Instead of choosing arbitrary numbers for our typography, we make use of a _modular scale_. "By using culturally relevant, historically pleasing ratios to create modular scales and basing the measurements in our compositions on values from those scales, we can achieve a visual harmony not found in layouts that use arbitrary, conventional, or easily divisible numbers." ([_More Meaningful Typography_](https://alistapart.com/article/more-meaningful-typography/))
-
-Applied to web typography, this means we choose a base font size and apply a ratio to it. The ratio is then squared to generate an ascending scale.
-
-```scss
-/* perfect fifth */
-$ratio: 1.5;
-
-/* browser default */
-$base: 16px;
-
-/**
- * The formular is always "$base * $ratio ** $level", the level is a integer.
- * The resulting value is usually rounded to avoid poor sub-pixel rendering.
- *
- * Note that in the below example the number is not equal to the $level in
- * the formula.
- */
-$fontSize-0: 10px;
-$fontSize-1: 16px;
-$fontSize-2: 24px;
-$fontSize-3: 36px;
-/* etc.  */
-```
-
-A similar concept can be applied to spacing and sizing of elements. To maintain a aesthetically pleasing rhythm between elements, we adopt the _8pt grid_. This means that multiples of 8 are used to define dimensions, paddings and margins. As a result, all of our measurements follow the same rule and we automatically get a more consistent UI.
-
-```scss
-/* 8pt grid */
-$size-0: 0px;
-$size-1: 8px;
-$size-2: 16px;
-$size-3: 32px;
-$size-4: 64px;
-$size-5: 128px;
-$size-6: 256px;
-$size-7: 512px;
-```
-
-Read more:
-
-- [A List Apart: More Meaningful Typography](https://alistapart.com/article/more-meaningful-typography/)
-- [Type Scale Calculator](https://type-scale.com/)
-- [Bryn Jackson's 8-Point Grid](https://spec.fm/specifics/8-pt-grid)

package/src/index.ts

@@ -1,8 +0,0 @@
-export * from './Box';
-export * from './Global';
-export * from './normalize';
-export * from './SVG';
-export * from './theme';
-export * from './types';
-export * from './useTheme';
-export * from './variant';

package/src/normalize.test.tsx

@@ -1,15 +0,0 @@
-import { normalize, getNormalizedStyles } from './normalize';
-
-test.each(Object.entries(normalize))('base is included in %p', (_, value) => {
-  expect(value).toMatchObject(normalize.base);
-});
-
-test('get normalized styles', () => {
-  expect(getNormalizedStyles('a')).toMatchObject(normalize.a);
-  expect(getNormalizedStyles('p')).toMatchObject(normalize.p);
-});
-
-test('return base normalzation for arbitrary components', () => {
-  const Component = () => null;
-  expect(getNormalizedStyles(Component)).toMatchObject(normalize.base);
-});

package/src/normalize.ts

@@ -1,100 +0,0 @@
-/**
- * Normalize styling of certain elements between browsers.
- * Based on https://www.joshwcomeau.com/css/custom-css-reset/
- */
-import { ElementType } from 'react';
-
-const base = {
-  boxSizing: 'border-box',
-  margin: 0,
-  minWidth: 0,
-} as const;
-
-const a = {
-  ...base,
-  textDecoration: 'none',
-} as const;
-
-const text = {
-  ...base,
-  overflowWrap: 'break-word',
-} as const;
-
-const media = {
-  ...base,
-  display: 'block',
-  maxWidth: '100%',
-} as const;
-
-const button = {
-  ...base,
-  display: 'block',
-  appearance: 'none',
-  font: 'inherit',
-  background: 'transparent',
-  textAlign: 'center',
-} as const;
-
-const input = {
-  ...base,
-  display: 'block',
-  appearance: 'none',
-  font: 'inherit',
-  '&::-ms-clear': {
-    display: 'none',
-  },
-  '&::-webkit-search-cancel-button': {
-    WebkitAppearance: 'none',
-  },
-} as const;
-
-const select = {
-  ...base,
-  display: 'block',
-  appearance: 'none',
-  font: 'inherit',
-  '&::-ms-expand': {
-    display: 'none',
-  },
-} as const;
-
-const textarea = {
-  ...base,
-  display: 'block',
-  appearance: 'none',
-  font: 'inherit',
-} as const;
-
-// Normalize
-// ---------------
-export const normalize = {
-  base,
-  a,
-  p: text,
-  h1: text,
-  h2: text,
-  h3: text,
-  h4: text,
-  h5: text,
-  h6: text,
-  img: media,
-  picture: media,
-  video: media,
-  canvas: media,
-  svg: media,
-  select,
-  button,
-  textarea,
-  input,
-} as const;
-
-export type NormalizedElement = keyof typeof normalize;
-
-/**
- * Type-safe helper to get normalization. If no normalization is found,
- * returns the *base* normalization.
- */
-export const getNormalizedStyles = (val?: ElementType) =>
-  typeof val === 'string' && val in normalize
-    ? normalize[val as NormalizedElement] // Typescript doesn't infer this correctly
-    : normalize.base;

package/src/theme.ts

@@ -1,157 +0,0 @@
-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

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

package/src/useTheme.test.tsx

@@ -1,123 +0,0 @@
-import React from 'react';
-import { jsx } from '@emotion/react';
-import { render, screen } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
-
-import { ThemeProvider, useTheme } from './useTheme';
-
-// Setup
-// ---------------
-const theme = {
-  colors: {
-    primary: 'hotpink',
-    black: '#000',
-  },
-  space: {
-    none: 0,
-    small: 16,
-    medium: 24,
-    large: 32,
-  },
-  text: {
-    body: {
-      fontSize: 1,
-      color: 'black',
-    },
-    heading: {
-      fontSize: 3,
-      color: 'primary',
-    },
-  },
-};
-
-const wrapper: React.FC = ({ children }) => (
-  <ThemeProvider theme={theme}>{children}</ThemeProvider>
-);
-
-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.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,
-    }
-  `);
-});
-
-test('themes can be cascaded', () => {
-  const outerTheme = {
-    colors: {
-      primary: 'coral',
-    },
-  };
-
-  const innerTheme = {
-    colors: {
-      primary: 'gainsboro',
-    },
-  };
-
-  const Theme = ({ testId }: { testId: string }) => {
-    const { theme } = useTheme();
-    return <div data-testid={testId}>{JSON.stringify(theme, null, 2)}</div>;
-  };
-
-  render(
-    <ThemeProvider theme={outerTheme}>
-      <>
-        <Theme testId="outer" />
-        <ThemeProvider theme={innerTheme}>
-          <Theme testId="inner" />
-        </ThemeProvider>
-      </>
-    </ThemeProvider>
-  );
-
-  const outer = screen.getByTestId('outer');
-  const inner = screen.getByTestId('inner');
-
-  expect(outer.innerHTML).toMatchInlineSnapshot(`
-    "{
-      \\"colors\\": {
-        \\"primary\\": \\"coral\\"
-      }
-    }"
-  `);
-  expect(inner.innerHTML).toMatchInlineSnapshot(`
-    "{
-      \\"colors\\": {
-        \\"primary\\": \\"gainsboro\\"
-      }
-    }"
-  `);
-});
-
-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,50 +0,0 @@
-import React, {
-  createContext,
-  ReactNode,
-  useCallback,
-  useContext,
-} from 'react';
-import { css as transformStyleObject } from '@theme-ui/css';
-import { ThemeProvider as EmotionProvider } from '@emotion/react';
-
-import { Theme } from './theme';
-import { StyleObject } from './types';
-
-/**
- * @internal
- */
-export const __defaultTheme: Theme = {};
-
-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,
-}: ThemeProviderProps<T>) {
-  return (
-    <EmotionProvider theme={theme}>
-      <InternalContext.Provider value={theme}>
-        {children}
-      </InternalContext.Provider>
-    </EmotionProvider>
-  );
-}