<repo_name>urbit/indigo-react<file_sep>/src/util.ts
export const sequence = (num: number) => Array.from(Array(num), (_, i) => i);
<file_sep>/docs/src/types.ts
export type ComponentProperties = {
  id: string;
  displayName: string;
  snippet: string;
  props: [];
};

export type ComponentEntry = {
  id: string;
  displayName: string;
};

export type Manifest = {
  componentCount: number;
  components: ComponentEntry[];
};
<file_sep>/DEVELOPMENT.md
# Development

## Getting Started

`npm install`

`npm install -g typescript` if you have never install TS

`npm run build`

There are a few ways of making new components for Indigo. Let's cover some of the core patterns.

## Component Patterns

### Single Element Component with dynamic properties

Creating a basic theme-aware component with dynamic properties from scratch.

```tsx
import styled from "styled-components";
import css, { SystemStyleObject } from "@styled-system/css";
// commonStyle includes all commonly used styled-system props
import { commonStyle, CommonStyleProps } from "./system/unions";

// Define property types and export typing
export type LabelProps = CommonStyleProps & {
  gray?: boolean;
  bold?: boolean;
  mono?: boolean;
};

// First, a we create a style object. Then, we pass it to css(), whcih converts values like fontSize:0 to fontSize:'12px'. The conversion is based on the theme. Css() returns a function that can be passed to styled.foo() as a StyleFn, like border, color, and flexbox imported from styled-system. This method is convinient because you don't have to pass the theme as a prop and write a bunch of template string functions for each dynamic property. We also assign prop defaults in the argument field.
const style = ({ gray = false, bold = false, mono = false }: LabelProps) =>
  css({
    fontWeight: bold ? "bold" : "regular",
    color: gray ? "gray" : "black",
    fontFamily: mono ? "mono" : "sans",
    display: "block",
    lineHeight: "short",
    fontSize: 1,
    pointerEvents: "none",
    userSelect: "none",
    verticalAlign: "middle",
    width: "100%",
  } as SystemStyleObject);

// Here, we define out component. Because we want this component to use an HTML <label>, we used styled.label and pass a series of styleFns to it. These essentially 'gather' the styles defined above and styles passed through props. They are then merged in a css class which is seen in the DOM as something like `sc-jFdnav`.
export const Label = styled.label<React.PropsWithChildren<LabelProps>>(
  style,
  ...commonStyle
);

// Add a displayName. It appears in the React devtools inspector and in errors. This is mandatory.
Label.displayName = "Label";
```

## Single Element Styled Component from Existing Component

Creating a styled component from an existing component, like one sourced from a 3rd party library.

```tsx
import { Form as FormikForm } from "formik";
import styled from "styled-components";
import { compose } from "styled-system";
import { structureStyle, StructureProps } from "./system/unions";

// Create and export property typing.
type ManagedFormProps = StructureProps;

// An existing component can be passed to styled() to create a styled component.
export const ManagedForm = styled(FormikForm)<
  React.PropsWithChildren<ManagedFormProps>
>({}, ...structureStyle);

ManagedForm.displayName = "ManagedForm";
```

### Composite React Component

This is a component made from several styled components imported from Indigo.

```tsx
import * as React from "react";
import { CommonStyleProps } from "./system/unions";
import { Row } from "../Row/Row";
import { Col } from "../Col/Col";

// Create and export the main component typing
export type TwoUpProps = CommonStyleProps &
  // Extend with this React typing so that the base component has div properties.
  React.HTMLAttributes<HTMLDivElement> & {
    // This is a special case where we overwrite `children` to be an array.
    children: React.ReactNodeArray;
  };

type ChildProps = CommonStyleProps & React.HTMLAttributes<HTMLDivElement>;

const Child = ({ children, ...props }: ChildProps) => (
  <Col width={["100%", "100%", "50%"]} {...props}>
    {children || <div />}
  </Col>
);

export const TwoUp = ({ children, ...props }: TwoUpProps) => (
  <Row flexDirection={["column", "row", "row"]} flexWrap="wrap" {...props}>
    <Child>{children[0] || <div />}</Child>
    <Child>{children[1] || <div />}</Child>
  </Row>
);

TwoUp.displayName = "TwoUp";
```

## Scripts

`npm run build` Builds the library with `esbuild` and constructs typings with `tsc`

`npm run esbuild` Builds the library with `esbuild` but skips generating typings. Typings take a long time to generate, so if you havn't changed your type definitons, this can rapidly speed up iteration time for visual polish tasks.

`npm run reset` Removes node_modules and package-lock.json and npm installs fresh

### Related

| Library      | Github                                    | NPM                                              |
| ------------ | ----------------------------------------- | ------------------------------------------------ |
| indigo-light | https://www.github.com/urbit/indigo-light | https://www.npmjs.com/package/@tlon/indigo-light |
| indigo-dark  | https://www.github.com/urbit/indigo-dark  | https://www.npmjs.com/package/@tlon/indigo-dark  |
| indigo-react | https://www.github.com/urbit/indigo-react | https://www.npmjs.com/package/@tlon/indigo-react |

### License

MIT License © [Tlon](https://tlon.io)
<file_sep>/src/system/tokens.ts
import { SystemStyleObject } from "@styled-system/css";

type SystemStyleObjects = {
  [key: string]: SystemStyleObject;
};

type SystemStyleProp =
  | string
  | string[]
  | number[]
  | (string & (string | number | symbol | null)[])
  | (string & {
      [x: string]: string | number | symbol | undefined;
      [x: number]: string | number | symbol | undefined;
    })
  | undefined;

const container = {
  center: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  } as SystemStyleObject,
  centerX: {
    display: "flex",
    alignItems: "center",
  } as SystemStyleObject,
  centerY: {
    display: "flex",
    justifyContent: "center",
  } as SystemStyleObject,
};

const button = {
  state: {
    primary: {
      backgroundColor: "blue",
      color: "white",
      // "*": { fill: "white" },
      borderColor: "blue",
    },
    primaryDisabled: {
      backgroundColor: "washedBlue",
      color: "lightBlue",
      // "*": { fill: "lightBlue" },
      borderColor: "lightBlue",
    },
    default: {
      backgroundColor: "white",
      color: "black",
      // "*": { fill: "black" },
      borderColor: "lightGray",
    },
    defaultDisabled: {
      backgroundColor: "washedGray",
      color: "lightGray",
      // "*": { fill: "lightGray" },
      borderColor: "lightGray",
    },
    destructivePrimary: {
      backgroundColor: "red",
      color: "white",
      // "*": { fill: "white" },
      borderColor: "red",
    },
    destructivePrimaryDisabled: {
      backgroundColor: "washedRed",
      color: "lightRed",
      // "*": { fill: "lightRed" },
      borderColor: "lightRed",
    },
    destructive: {
      backgroundColor: "white",
      color: "red",
      // "*": { fill: "red" },
      borderColor: "red",
    },
    destructiveDisabled: {
      backgroundColor: "washedRed",
      color: "lightRed",
      // "*": { fill: "lightRed" },
      borderColor: "lightRed",
    },
  } as SystemStyleObjects,
  text: {
    textAlign: "center",
    verticalAlign: "middle",
    lineHeight: "short",
    fontWeight: 500,
    userSelect: "none",
    fontSize: 1,
    fontFamily: "sans",
    textDecoration: "none",
  } as SystemStyleObject,
};

const action = {
  state: {
    default: {
      color: "blue",
      background: "white",
      // "*": { fill: "blue" },
    },
    defaultDisabled: {
      color: "lightGray",
      background: "white",
      // "*": { fill: "lightGray" },
    },
    destructive: {
      color: "red",
      background: "white",
      // "*": { fill: "red" },
    },
    destructiveDisabled: {
      color: "lightRed",
      background: "white",
      // "*": { fill: "lightRed" },
    },
  } as SystemStyleObjects,
  text: {
    textAlign: "left",
    verticalAlign: "middle",
    lineHeight: "short",
    fontWeight: 500,
    userSelect: "none",
    fontSize: 1,
    fontFamily: "sans",
    textDecoration: "none",
  } as SystemStyleObject,
};

const indicator = {
  state: {
    on: {
      "*": { fill: "white" },
      backgroundColor: "blue",
      borderColor: "blue",
    },
    off: {
      "*": { fill: "transparent" },
      backgroundColor: "white",
      borderColor: "lightGray",
    },
    onError: {
      "*": { fill: "white" },
      backgroundColor: "red",
      borderColor: "red",
    },
    offError: {
      "*": { fill: "transparent" },
      backgroundColor: "washedRed",
      borderColor: "red",
    },
    offDisabled: {
      "*": { fill: "transparent" },
      backgroundColor: "washedGray",
      borderColor: "lightGray",
    },
    onDisabled: {
      "*": { fill: "lightGray" },
      backgroundColor: "washedGray",
      borderColor: "lightGray",
    },
  } as SystemStyleObjects,
};

const selectorDefaults = {
  display: "block",
  position: "absolute",
  padding: "6px",
  borderRadius: "999px",
  border: "1px solid",
  // content property `' '` must be wrapped in quotes.
  content: "' '",
};

const toggleSwitch = {
  states: {
    selected: {
      backgroundColor: "blue",
      borderColor: "transparent",
      "&::before": {
        // Note that `border-color` must come after `border`.
        ...selectorDefaults,
        backgroundColor: "white",
        borderColor: "transparent",
        transform: "translateX(8px)",
      },
    },
    default: {
      backgroundColor: "lightGray",
      borderColor: "transparent",
      "&::before": {
        ...selectorDefaults,
        borderColor: "transparent",
        backgroundColor: "white",
      },
    },
    selectedDisabled: {
      backgroundColor: "lightGray",
      borderColor: "transparent",
      "&::before": {
        ...selectorDefaults,
        backgroundColor: "scales.white70",
        borderColor: "transparent",
        transform: "translateX(8px)",
      },
    },
    hasErrorSelected: {
      backgroundColor: "red",
      borderColor: "transparent",
      "&::before": {
        ...selectorDefaults,
        backgroundColor: "white",
        borderColor: "transparent",
        transform: "translateX(8px)",
      },
    },
    hasError: {
      backgroundColor: "red",
      borderColor: "transparent",
      "&::before": {
        ...selectorDefaults,
        borderColor: "transparent",
        backgroundColor: "white",
      },
    },
    disabled: {
      backgroundColor: "lightGray",
      borderColor: "transparent",
      "&::before": {
        ...selectorDefaults,
        borderColor: "transparent",
        backgroundColor: "scales.white70",
      },
    },
  } as SystemStyleObjects,
};

const textInput = {
  state: {
    default: {
      borderColor: "lightGray",
      color: "black",
      backgroundColor: "white",
    },
    disabled: {
      borderColor: "lightGray",
      color: "gray",
      backgroundColor: "washedGray",
    },
    hasError: {
      borderColor: "red",
      color: "red",
      backgroundColor: "washedRed",
    },
  } as SystemStyleObjects,
  text: {
    textAlign: "left",
    lineHeight: "short",
    fontWeight: 400,
    fontSize: 1,
    fontFamily: "sans",
    textDecoration: "none",
  } as SystemStyleObject,
};

export {
  // Core patterns
  container,
  // UI Patterns
  button,
  action,
  textInput,
  toggleSwitch,
  // Used for radio and checkbox
  indicator,
  // Types
  SystemStyleProp,
  // Utils
};
<file_sep>/tsconfig.json
{
  "compilerOptions": {
    // Signifies which target of JavaScript should be emitted?
    "target": "ES2015",
    // What module format should be emitted?
    "module": "ES2015",
    // See: https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Module%20Resolution.md
    "moduleResolution": "node",
    // Output destination
    "outDir": "dist",
    // This lib uses JSX, so support it
    "jsx": "react",
    // Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
    "esModuleInterop": true,
    // Don't typecheck libraries in node_modules
    "skipLibCheck": true,
    // Export type declarations and only type declrations. No extra source files to dist.
    "emitDeclarationOnly": true,
    "declaration": true,
    // Enables --noImplicitAny, --dnoImplicitThis, --alwaysStrict, --strictBindCallApply, --strictNullChecks, --strictFunctionTypes and --strictPropertyInitialization.
    "strict": true,
    // Minor style enforcements
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    // The following can be set to false in development to make prototyping easier.
    "noUnusedLocals": true,
    "noUnusedParameters": true
  },
  "files": ["src/index.tsx"]
}
<file_sep>/scripts/temp_migrate.js
const fs = require("fs");
const path = require("path");

const src = __dirname + "/../src";

const exclude = [
  ".DS_Store",
  "util.ts",
  "index.tsx",
  "index.ts",
  "iconIndex.tsx",
];

const include = [".tsx"];

const excludeExt = [".json", ".md"];

const basicDocjs = (name) => `<${name}> </${name}>`;
const basicReadme = (name) => `
    # ${name}

    ## Purpose

    ## Usage

    ### Related

    | Library      | Github                                    | NPM                                              |
    | ------------ | ----------------------------------------- | ------------------------------------------------ |
    | indigo-light | https://www.github.com/urbit/indigo-light | https://www.npmjs.com/package/@tlon/indigo-light |
    | indigo-dark  | https://www.github.com/urbit/indigo-dark  | https://www.npmjs.com/package/@tlon/indigo-dark  |
    | indigo-react | https://www.github.com/urbit/indigo-react | https://www.npmjs.com/package/@tlon/indigo-react |

    ### License

    MIT License © [Tlon](https://tlon.io)
`;

const sourceFiles = fs
  .readdirSync(src)
  .map((sourcePath) => path.parse(sourcePath))
  // .filter((parsedPath) => include.includes(parsedPath.ext))
  .filter((parsedPath) => !exclude.includes(parsedPath.base))
  .filter((parsedPath) => !excludeExt.includes(parsedPath.ext));

// sourceFiles.map((parsedPath) => fs.mkdirSync(src + "/" + parsedPath.name));

console.log(sourceFiles);

sourceFiles.map((parsedPath) => {
  // const oldPath = src + "/" + parsedPath.base;
  // const newPath = src + "/" + parsedPath.name + "/" + parsedPath.base;
  //   console.log(oldPath, newPath);
  // fs.renameSync(oldPath, newPath, function (err) {
  //   if (err) throw err;
  //   //   console.log('Successfully renamed - AKA moved!')
  // });
  // const readmePath = src + "/" + parsedPath.name + "/" + "README.md";
  const docsJsonPath = src + "/" + parsedPath.name + "/" + "docs.json";

  const docsJsPath = src + "/" + parsedPath.name + "/" + "docs.js";

  if (fs.existsSync(docsJsonPath)) {
    fs.unlinkSync(docsJsonPath);
  }
  // fs.writeFileSync(readmePath, basicReadme(parsedPath.name), "utf8");

  if (fs.existsSync(docsJsPath)) {
    // do something
  } else {
    fs.writeFileSync(docsJsPath, basicDocjs(parsedPath.name), "utf8");
  }
});

// console.log(sourceFiles)
<file_sep>/README.md
# indigo-react

[![npm (scoped)](https://img.shields.io/npm/v/@tlon/indigo-react?style=flat)](https://www.npmjs.com/package/@tlon/indigo-react)

Indigo React is a component library for implementing the [Indigo Design System](<https://www.figma.com/community/file/822953707012850361/Indigo-(alpha)>). It's built with React, [styled-components](https://styled-components.com) and [styled-system](https://styled-system.com). It also uses [Formik](https://formik.org/) and [Reach-UI](https://reach.tech/).

## Quick Start

1. Install the library

```bash
npm install --save @tlon/indigo-react
```

2. Install peer dependencies

```bash
npm install --save @tlon/indigo-light styled-components styled-system react react-dom @reach/disclosure @reach/menu-button @reach/tabs markdown-to-jsx formik
```

If you are using Typescript, install the type definitions for several of these libraries.

```bash
npm install --save @types/styled-components @types/styled-system @types/styled-system__css
```

3. Install a theme

```bash
npm install --save @tlon/indigo-light @tlon/indigo-dark
```

## Basic Usage

```js
import * as React from "react";
import { ThemeProvider } from "styled-system";
import { Text, Reset } from "@tlon/indigo-react";
import light from "@tlon/indigo-light";

class App extends React.Component {
  render() {
    return (
      <ThemeProvider theme={light}>
        <Reset />
        <Text fontSize="2">Indigo!</Text>
      </ThemeProvider>
    );
  }
}
```

In the above, we are wrapping our application in styled-component's `ThemeProvider` and passing in our `theme` from `@tlon/indigo-light`. In practice, you should rarely need to import the theme.

The `<Text />` component accepts a fontSize prop, which is one of many style props provided by `styled-system`. Using VSCode is the best way to see the list of props each component can accept.

You can also check out the [styled-system docs](https://styled-system.com/api) for a breakdown of props.

Many of these props have corrosponding styling shortcuts, drawn from the provided theme, like `@tlon/indigo-light`. These shortcuts are also provided by `styled-system`. To see how props map to values in our theme, check out [styled-system's mapping](https://styled-system.com/table).

Take a look at the [theme](https://www.github.com/urbit/indigo-light) to get a sense for which style values can be accessed from styled props.

## Development

See [DEVELOPMENT.md](https://github.com/urbit/indigo-react/blob/master/DEVELOPMENT.md) for example cases of component patterns used to create Indigo.

### Related

| Library      | Github                                    | NPM                                              |
| ------------ | ----------------------------------------- | ------------------------------------------------ |
| indigo-light | https://www.github.com/urbit/indigo-light | https://www.npmjs.com/package/@tlon/indigo-light |
| indigo-dark  | https://www.github.com/urbit/indigo-dark  | https://www.npmjs.com/package/@tlon/indigo-dark  |
| indigo-react | https://www.github.com/urbit/indigo-react | https://www.npmjs.com/package/@tlon/indigo-react |

### License

MIT License © [Tlon](https://tlon.io)
<file_sep>/src/themes/dark.ts
import baseStyled, { ThemedStyledInterface } from "styled-components";

const base = {
  white: "rgba(255,255,255,1)",
  black: "rgba(26,26,26,1)",
  red: "rgba(255,65,54,1)",
  yellow: "rgba(255,199,0,1)",
  green: "rgba(0,159,101,1)",
  blue: "rgba(0,142,255,1)",
};

const scales = {
  black05: "rgba(255,255,255,0.05)",
  black10: "rgba(255,255,255,0.1)",
  black20: "rgba(255,255,255,0.2)",
  black30: "rgba(255,255,255,0.3)",
  black40: "rgba(255,255,255,0.4)",
  black50: "rgba(255,255,255,0.5)",
  black60: "rgba(255,255,255,0.6)",
  black70: "rgba(255,255,255,0.7)",
  black80: "rgba(255,255,255,0.8)",
  black90: "rgba(255,255,255,0.9)",
  black100: "rgba(255,255,255,1)",
  white05: "rgba(0,0,0,0.05)",
  white10: "rgba(0,0,0,0.1)",
  white20: "rgba(0,0,0,0.2)",
  white30: "rgba(0,0,0,0.3)",
  white40: "rgba(0,0,0,0.4)",
  white50: "rgba(0,0,0,0.5)",
  white60: "rgba(0,0,0,0.6)",
  white70: "rgba(0,0,0,0.7)",
  white80: "rgba(0,0,0,0.8)",
  white90: "rgba(0,0,0,0.9)",
  white100: "rgba(0,0,0,1)",
  red05: "rgba(255,65,54,0.05)",
  red10: "rgba(255,65,54,0.1)",
  red20: "rgba(255,65,54,0.2)",
  red30: "rgba(255,65,54,0.3)",
  red40: "rgba(255,65,54,0.4)",
  red50: "rgba(255,65,54,0.5)",
  red60: "rgba(255,65,54,0.6)",
  red70: "rgba(255,65,54,0.7)",
  red80: "rgba(255,65,54,0.8)",
  red90: "rgba(255,65,54,0.9)",
  red100: "rgba(255,65,54,1)",
  yellow05: "rgba(255,199,0,0.05)",
  yellow10: "rgba(255,199,0,0.1)",
  yellow20: "rgba(255,199,0,0.2)",
  yellow30: "rgba(255,199,0,0.3)",
  yellow40: "rgba(255,199,0,0.4)",
  yellow50: "rgba(255,199,0,0.5)",
  yellow60: "rgba(255,199,0,0.6)",
  yellow70: "rgba(255,199,0,0.7)",
  yellow80: "rgba(255,199,0,0.8)",
  yellow90: "rgba(255,199,0,0.9)",
  yellow100: "rgba(255,199,0,1)",
  green05: "rgba(0,159,101,0.05)",
  green10: "rgba(0,159,101,0.1)",
  green20: "rgba(0,159,101,0.2)",
  green30: "rgba(0,159,101,0.3)",
  green40: "rgba(0,159,101,0.4)",
  green50: "rgba(0,159,101,0.5)",
  green60: "rgba(0,159,101,0.6)",
  green70: "rgba(0,159,101,0.7)",
  green80: "rgba(0,159,101,0.8)",
  green90: "rgba(0,159,101,0.9)",
  green100: "rgba(0,159,101,1)",
  blue05: "rgba(0,142,255,0.05)",
  blue10: "rgba(0,142,255,0.1)",
  blue20: "rgba(0,142,255,0.2)",
  blue30: "rgba(0,142,255,0.3)",
  blue40: "rgba(0,142,255,0.4)",
  blue50: "rgba(0,142,255,0.5)",
  blue60: "rgba(0,142,255,0.6)",
  blue70: "rgba(0,142,255,0.7)",
  blue80: "rgba(0,142,255,0.8)",
  blue90: "rgba(0,142,255,0.9)",
  blue100: "rgba(0,142,255,1)",
};

const util = {
  cyan: "#00FFFF",
  magenta: "#FF00FF",
  yellow: "#FFFF00",
  black: "#000000",
};

export const dark = {
  colors: {
    white: base.black,
    black: base.white,

    gray: scales.black60,
    lightGray: scales.black30,
    washedGray: scales.black10,

    red: base.red,
    lightRed: scales.red30,
    washedRed: scales.red10,

    yellow: base.yellow,
    lightYellow: scales.yellow30,
    washedYellow: scales.yellow10,

    green: base.green,
    lightGreen: scales.green30,
    washedGreen: scales.green10,

    blue: base.blue,
    lightBlue: scales.blue30,
    washedBlue: scales.blue10,

    none: "rgba(0,0,0,0)",

    scales: scales,
    util: util,
  },
  fonts: {
    sans: `"Inter", "Inter UI", -apple-system, BlinkMacSystemFont, 'San Francisco', 'Helvetica Neue', Arial, sans-serif`,
    mono: `"Source Code Pro", "Roboto mono", "Courier New", monospace`,
  },
  // font-size
  fontSizes: [
    12, // 0
    14, // 1
    16, // 2
    20, // 3
    24, // 4
    32, // 5
    48, // 6
    64, // 7
  ],
  // 	font-weight
  fontWeights: {
    thin: 300,
    regular: 400,
    bold: 500,
  },
  // line-height
  lineHeights: {
    min: 1.2,
    short: 1.33334,
    regular: 1.5,
    tall: 1.66667,
  },
  // border, border-top, border-right, border-bottom, border-left
  borders: ["none", "1px solid"],
  // margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left, grid-gap, grid-column-gap, grid-row-gap
  space: [
    0, // 0
    4, // 1
    8, // 2
    16, // 3
    24, // 4
    32, // 5
    48, // 6
    64, // 7
    96, // 8
  ],
  // border-radius
  radii: [
    0, // 0
    2, // 1
    4, // 2
    8, // 3
  ],
  // width, height, min-width, max-width, min-height, max-height
  sizes: [
    0, // 0
    4, // 1
    8, // 2
    16, // 3
    24, // 4
    32, // 5
    48, // 6
    64, // 7
    96, // 8
  ],
  // z-index
  zIndices: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  breakpoints: ["768px", "1024px", "1440px", "2200px"],
};
export type Theme = typeof dark;
export const styled = baseStyled as ThemedStyledInterface<Theme>;
<file_sep>/docs/src/constants.ts
export const links = {
  reactNPM: "https://www.npmjs.com/package/@tlon/indigo-react",
  reactGithub: "https://github.com/urbit/indigo-react",
  tokensNPM: "https://www.npmjs.com/package/@tlon/indigo-light",
  tokensGithub: "https://github.com/urbit/indigo-tokens",
  figma: "https://www.figma.com/file/H1RAHV4KscSTnvrIiL0z8C/Indigo",
};

// @ts-ignore
export const baseURL =
  process.env.NODE_ENV === "development"
    ? "http://localhost:1234"
    : "https://indigo.urbit.org";

// @ts-ignore
// export const assetUrl = process.env.NODE_ENV === 'development'
//     ? 'http://localhost:1234'
//     : 'https://indigo.urbit.org'
<file_sep>/src/system/unions.ts
import {
  background,
  border,
  color,
  flexbox,
  grid,
  textAlign,
  opacity,
  layout,
  position,
  shadow,
  space,
  typography,
  system,
  BackgroundProps,
  BorderProps,
  ColorProps,
  FlexboxProps,
  GridProps,
  LayoutProps,
  PositionProps,
  ShadowProps,
  SpaceProps,
  TypographyProps,
  OpacityProps,
  OverflowProps,
  TextAlignProps,
} from "styled-system";

export type SystemProps = {
  cursor?: string;
  textOverflow?: string;
  whiteSpace?: string;
  textTransform?: string;
};

export type AllSystemProps = SystemProps &
  BackgroundProps &
  BorderProps &
  ColorProps &
  FlexboxProps &
  GridProps &
  LayoutProps &
  PositionProps &
  ShadowProps &
  SpaceProps &
  OpacityProps &
  OverflowProps &
  TextAlignProps &
  TypographyProps;

export const allSystemStyle = [
  background,
  border,
  color,
  flexbox,
  grid,
  textAlign,
  opacity,
  layout,
  position,
  shadow,
  space,
  typography,
  system({
    cursor: true,
    textOverflow: true,
    whiteSpace: true,
    textTransform: true,
  }),
];

export type CommonStyleProps = SystemProps &
  BorderProps &
  ColorProps &
  FlexboxProps &
  GridProps &
  LayoutProps &
  SpaceProps &
  TypographyProps;

export const commonStyle = [
  border,
  color,
  flexbox,
  grid,
  layout,
  space,
  typography,
];

export type CosmeticProps = SystemProps &
  BackgroundProps &
  BorderProps &
  ColorProps &
  ShadowProps &
  OpacityProps;

export const cosmeticStyle = [
  background,
  border,
  color,
  opacity,
  shadow,
  system({
    cursor: true,
  }),
];

export type StructureProps = SystemProps &
  BorderProps &
  FlexboxProps &
  GridProps &
  LayoutProps &
  PositionProps &
  SpaceProps &
  OverflowProps;

export const structureStyle = [
  border,
  flexbox,
  grid,
  layout,
  position,
  space,
  system({
    cursor: true,
  }),
];

export type TypographicProps = ColorProps &
  TextAlignProps &
  TypographyProps & {
    textOverflow?: string;
    whiteSpace?: string;
    textTransform?: string;
  };

export const typographicStyle = [
  color,
  textAlign,
  typography,
  system({
    cursor: true,
    textOverflow: true,
    whiteSpace: true,
    textTransform: true,
  }),
];

export const listStyle = [...allSystemStyle, system({ listStyle: true })];
export type ListProps = AllSystemProps & {
  listStyle?: string;
}
