orcs-design-system/es/assets/Colour/Colour.stories.js

TeamForm's Design System, aka: ORCS

import React from "react";
import { Colour } from ".";
import Flex from "../../components/Flex";
import Box from "../../components/Box";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default {
  title: "System/Colour" // Title of your story section
};
export const BlackOpacityScale = () => /*#__PURE__*/_jsxs(Flex, {
  justifyContent: "center",
  children: [/*#__PURE__*/_jsx(Colour, {
    bg: "black"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "black90"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "black80"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "black70"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "black60"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "black50"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "black40"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "black30"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "black20"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "black10"
  })]
});
export const WhiteOpacityScale = () => /*#__PURE__*/_jsx(Box, {
  bg: "greyDarkest",
  padding: "6",
  children: /*#__PURE__*/_jsxs(Flex, {
    justifyContent: "center",
    children: [/*#__PURE__*/_jsx(Colour, {
      bg: "white"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "white90"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "white80"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "white70"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "white60"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "white50"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "white40"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "white30"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "white20"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "white10"
    })]
  })
});
export const PrimaryOpacityScale = {
  render: () => /*#__PURE__*/_jsxs(Flex, {
    justifyContent: "center",
    children: [/*#__PURE__*/_jsx(Colour, {
      bg: "primary"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "primary90"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "primary80"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "primary70"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "primary60"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "primary50"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "primary40"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "primary30"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "primary20"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "primary10"
    })]
  }),
  name: "Primary Opacity Scale"
};
export const SecondaryOpacityScale = {
  render: () => /*#__PURE__*/_jsxs(Flex, {
    justifyContent: "center",
    children: [/*#__PURE__*/_jsx(Colour, {
      bg: "secondary"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "secondary90"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "secondary80"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "secondary70"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "secondary60"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "secondary50"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "secondary40"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "secondary30"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "secondary20"
    }), /*#__PURE__*/_jsx(Colour, {
      bg: "secondary10"
    })]
  }),
  name: "Secondary Opacity Scale"
};
export const SuccessOpacityScale = () => /*#__PURE__*/_jsxs(Flex, {
  justifyContent: "center",
  children: [/*#__PURE__*/_jsx(Colour, {
    bg: "success"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "success90"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "success80"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "success70"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "success60"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "success50"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "success40"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "success30"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "success20"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "success10"
  })]
});
export const WarningOpacityScale = () => /*#__PURE__*/_jsxs(Flex, {
  justifyContent: "center",
  children: [/*#__PURE__*/_jsx(Colour, {
    bg: "warning"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "warning90"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "warning80"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "warning70"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "warning60"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "warning50"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "warning40"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "warning30"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "warning20"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "warning10"
  })]
});
export const DangerOpacityScale = () => /*#__PURE__*/_jsxs(Flex, {
  justifyContent: "center",
  children: [/*#__PURE__*/_jsx(Colour, {
    bg: "danger"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "danger90"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "danger80"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "danger70"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "danger60"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "danger50"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "danger40"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "danger30"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "danger20"
  }), /*#__PURE__*/_jsx(Colour, {
    bg: "danger10"
  })]
});
BlackOpacityScale.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "BlackOpacityScale"
};
WhiteOpacityScale.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "WhiteOpacityScale"
};
SuccessOpacityScale.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "SuccessOpacityScale"
};
WarningOpacityScale.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "WarningOpacityScale"
};
DangerOpacityScale.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "DangerOpacityScale"
};