import {PoweroffOutlined} from "@ant-design/icons"; import {ComponentMeta, ComponentStory} from "@storybook/react"; import {Badge, Col, Row, Space} from "antd"; import React from "react"; import {Button} from "../Starship"; import "../Styles/index.scss"; import "../Styles/color-stories.scss"; // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export export default { title: "Example/Colours", component: Badge, argTypes: {}, // More on argTypes: https://storybook.js.org/docs/react/api/argtypes } as ComponentMeta; // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args const Template: ComponentStory = args => ( <> {/* primary button only text */}

Colours

Click on image icon at top to toogle dark/light theme colors

Light/dark theme Core Colors

var: --brandPrimary

var: --brandSecondary

var: --brandTertiary

var: --colorNegative

var: --colorPositive

var: --colorWarning

var: --brandPrimaryHover #6CE9A6

var: --brandPrimaryLight

var: --brandPrimaryDark

var: --colorPositiveLight

var: --colorPositiveDark

var: --colorNegativeLight

var: --colorNegativeDark

var: --brandSecondaryLight

var: --brandSecondaryDark

var: --brandTertiaryLight

var: --brandTertiaryDark

var: --colorStaticLight

var: --colorStaticDark

Light/dark theme Base Colors

var: --base-0

var: --base-100

var: --base-200

var: --base-300

var: --base-400

var: --base-500

var: --base-600

var: --base-700

var: --base-800

var: --base-900

var: --base-1000

var: --base-translucent

All shades Blue Colors

var: --blue-0 #385667

var: --blue-100 #43677B

var: --blue-200 #4E7890

var: --blue-300 #5A8AA4

var: --blue-400 #659BB9

var: --blue-500 #70ACCD

var: --blue-600 #7EB4D2

var: --blue-700 #8DBDD7

var: --blue-800 #9BC5DC

var: --blue-900 #A9CDE1

var: --blue-1000 #B8D6E6

All shades Teal Colors

var: --teal-0 #1C252B

var: --teal-100 #212C33

var: --teal-200 #27333B

var: --teal-300 #2C3A44

var: --teal-400 #32424D

var: --teal-500 #374955

var: --teal-600 #4B5B66

var: --teal-700 #5F6D77

var: --teal-800 #738088

var: --teal-900 #879299

var: --teal-1000 #9BA4AA

All shades Gray Colors

var: --gray-0 #2E3B44

var: --gray-100 #374651

var: --gray-200 #40525F

var: --gray-300 #495E6C

var: --gray-400 #52697A

var: --gray-500 #5B7587

var: --gray-600 #6B8393

var: --gray-700 #7C919F

var: --gray-800 #8C9EAB

var: --gray-900 #9DACB7

var: --gray-1000 #ADBAC3

All shades Green Colors

var: --green-0 #386753

var: --green-100 #437B64

var: --green-100 #4E9074

var: --green-300 #5AA485

var: --green-400 #65B995

var: --green-500 #70CDA6

var: --green-600 #7ED2AF

var: --green-700 #8DD7B8

var: --green-800 #9BDCC1

var: --green-900 #A9E1CA

var: --green-1000 #B8E6D3

All shades Red Colors

var: --red-0 #673838

var: --red-100 #7B4343

var: --red-200 #904E4E

var: --red-300 #A45A5A

var: --red-400 #B96565

var: --red-500 #CD7070

var: --red-600 #D27E7E

var: --red-700 #D78D8D

var: --red-800 #DC9B9B

var: --red-900 #E1A9A9

var: --red-1000 #E6B8B8

All shades Yellow Colors

var: --yellow-0 #675A38

var: --yellow-100 #7B6B43

var: --yellow-200 #907D4E

var: --yellow-300 #A48F5A

var: --yellow-400 #B9A165

var: --yellow-500 #CDB370

var: --yellow-600 #D2BB7E

var: --yellow-700 #D7C28D

var: --yellow-800 #DCCA9B

var: --yellow-900 #E1D1A9

var: --yellow-1000 #E6D9B8

All shades Dark Colors

var: --dark-tr-0 #242228CC

var: --dark-0 #131318

var: --dark-100 #17191D

var: --dark-200 #1D1B20

var: --dark-300 #242228

var: --dark-400 #2B2930

var: --dark-500 #36343B

var: --dark-600 #49454F

var: --dark-700 #938F99

var: --dark-800 #CAC4D0

var: --dark-900 #E6E0E9

var: --dark-1000 #FEF7FF

All shades Light Colors

var: --light-tr-100 #FFFFFFCC

var: --light-0 #E7F1F6

var: --light-100 #F8FAFC

var: --light-200 #E3E8EF

var: --light-300 #E6E0E9

var: --light-400 #DED8E1

var: --light-500 #7F848E

var: --light-600 #5D616C

var: --light-700 #525C76

var: --light-800 #434865

var: --light-900 #282A33

var: --light-1000 #212327

{/* primary button only text */} ); export const StarshipColours = Template.bind({}); // More on args: https://storybook.js.org/docs/react/writing-stories/args