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<typeof Badge>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Button> = args => (
    <>
        {/* primary button only text */}
        <h3 className="h4">Colours</h3>
        <p>Click on image icon  at top to toogle dark/light theme colors</p>
        <section className="all-used-colors">
            <div className="container">
                <div className="row">
                    <div className="col">
                        <h3>Light/dark theme Core Colors</h3>
                        <div className="box">
                            <div className="colored brandPrimary-bg"></div>
                            <b className="var">var: --brandPrimary </b>
                        </div>
                        <div className="box">
                            <div className="colored brandSecondary-bg"></div>
                            <b className="var">var: --brandSecondary </b>
                        </div>
                        <div className="box">
                            <div className="colored brandTertiary-bg"></div>
                            <b className="var">var: --brandTertiary</b>
                        </div>
                        <div className="box">
                            <div className="colored colorNegative-bg"></div>
                            <b className="var">var: --colorNegative</b>
                        </div>
                        <div className="box">
                            <div className="colored colorPositive-bg"></div>
                            <b className="var">var: --colorPositive</b>
                        </div>
                        <div className="box">
                            <div className="colored colorWarning-bg"></div>
                            <b className="var">var: --colorWarning</b>
                        </div>
                        <div className="box">
                            <div className="colored brandPrimaryHover-bg"></div>
                            <b className="var">var: --brandPrimaryHover</b>
                            <span className="code">#6CE9A6</span>
                        </div>
                        <div className="box">
                            <div className="colored brandPrimaryLight-bg"></div>
                            <b className="var">var: --brandPrimaryLight</b>
                        </div>
                        <div className="box">
                            <div className="colored brandPrimaryDark-bg"></div>
                            <b className="var">var: --brandPrimaryDark</b>
                        </div>
                        <div className="box">
                            <div className="colored colorPositiveLight-bg"></div>
                            <b className="var">var: --colorPositiveLight</b>
                        </div>
                        <div className="box">
                            <div className="colored colorPositiveDark-bg"></div>
                            <b className="var">var: --colorPositiveDark</b>
                        </div>
                        <div className="box">
                            <div className="colored colorNegativeLight-bg"></div>
                            <b className="var">var: --colorNegativeLight</b>
                        </div>
                        <div className="box">
                            <div className="colored colorNegativeDark-bg"></div>
                            <b className="var">var: --colorNegativeDark</b>
                        </div>
                        <div className="box">
                            <div className="colored brandSecondaryLight-bg"></div>
                            <b className="var">var: --brandSecondaryLight</b>
                        </div>
                        <div className="box">
                            <div className="colored brandSecondaryDark-bg"></div>
                            <b className="var">var: --brandSecondaryDark</b>
                        </div>
                        <div className="box">
                            <div className="colored brandTertiaryLight-bg"></div>
                            <b className="var">var: --brandTertiaryLight</b>
                        </div>
                        <div className="box">
                            <div className="colored brandTertiaryDark-bg"></div>
                            <b className="var">var: --brandTertiaryDark</b>
                        </div>
                        <div className="box">
                            <div className="colored colorStaticLight-bg"></div>
                            <b className="var">var: --colorStaticLight</b>
                        </div>
                        <div className="box">
                            <div className="colored colorStaticDark-bg"></div>
                            <b className="var">var: --colorStaticDark</b>
                        </div>
                    </div>
                    <div className="col">
                        <h3>Light/dark theme Base Colors</h3>
                        <div className="box">
                            <div className="colored base-0-bg"></div>
                            <b className="var">var: --base-0</b>
                        </div>
                        <div className="box">
                            <div className="colored base-100-bg"></div>
                            <b className="var">var: --base-100</b>
                        </div>
                        <div className="box">
                            <div className="colored base-100-bg"></div>
                            <b className="var">var: --base-200</b>
                        </div>
                        <div className="box">
                            <div className="colored base-300-bg"></div>
                            <b className="var">var: --base-300</b>
                        </div>
                        <div className="box">
                            <div className="colored base-400-bg"></div>
                            <b className="var">var: --base-400</b>
                        </div>
                        <div className="box">
                            <div className="colored base-500-bg"></div>
                            <b className="var">var: --base-500</b>
                        </div>
                        <div className="box">
                            <div className="colored base-600-bg"></div>
                            <b className="var">var: --base-600</b>
                        </div>
                        <div className="box">
                            <div className="colored base-700-bg"></div>
                            <b className="var">var: --base-700</b>
                        </div>
                        <div className="box">
                            <div className="colored base-800-bg"></div>
                            <b className="var">var: --base-800</b>
                        </div>
                        <div className="box">
                            <div className="colored base-900-bg"></div>
                            <b className="var">var: --base-900</b>
                        </div>
                        <div className="box">
                            <div className="colored base-1000-bg"></div>
                            <b className="var">var: --base-1000</b>
                        </div>
                        <div className="box">
                            <div className="colored base-translucent-bg"></div>
                            <b className="var">var: --base-translucent</b>
                        </div>
                    </div>
                    <div className="col">
                        <h3>All shades Blue Colors</h3>
                        <div className="box">
                            <div className="colored blue-0-bg"></div>
                            <b className="var">var: --blue-0</b>
                            <span className="code">#385667</span>
                        </div>
                        <div className="box">
                            <div className="colored blue-100-bg"></div>
                            <b className="var">var: --blue-100</b>
                            <span className="code">#43677B</span>
                        </div>
                        <div className="box">
                            <div className="colored blue-200-bg"></div>
                            <b className="var">var: --blue-200</b>
                            <span className="code">#4E7890</span>
                        </div>
                        <div className="box">
                            <div className="colored blue-300-bg"></div>
                            <b className="var">var: --blue-300</b>
                            <span className="code">#5A8AA4</span>
                        </div>
                        <div className="box">
                            <div className="colored blue-400-bg"></div>
                            <b className="var">var: --blue-400</b>
                            <span className="code">#659BB9</span>
                        </div>
                        <div className="box">
                            <div className="colored blue-500-bg"></div>
                            <b className="var">var: --blue-500</b>
                            <span className="code">#70ACCD</span>
                        </div>
                        <div className="box">
                            <div className="colored blue-600-bg"></div>
                            <b className="var">var: --blue-600</b>
                            <span className="code">#7EB4D2</span>
                        </div>
                        <div className="box">
                            <div className="colored blue-700-bg"></div>
                            <b className="var">var: --blue-700</b>
                            <span className="code">#8DBDD7</span>
                        </div>
                        <div className="box">
                            <div className="colored blue-800-bg"></div>
                            <b className="var">var: --blue-800</b>
                            <span className="code">#9BC5DC</span>
                        </div>
                        <div className="box">
                            <div className="colored blue-900-bg"></div>
                            <b className="var">var: --blue-900</b>
                            <span className="code">#A9CDE1</span>
                        </div>
                        <div className="box">
                            <div className="colored blue-1000-bg"></div>
                            <b className="var">var: --blue-1000</b>
                            <span className="code">#B8D6E6</span>
                        </div>
                    </div>
                    <div className="col">
                        <h3>All shades Teal Colors</h3>
                        <div className="box">
                            <div className="colored teal-0-bg"></div>
                            <b className="var">var: --teal-0</b>
                            <span className="code">#1C252B</span>
                        </div>
                        <div className="box">
                            <div className="colored teal-100-bg"></div>
                            <b className="var">var: --teal-100</b>
                            <span className="code">#212C33</span>
                        </div>
                        <div className="box">
                            <div className="colored teal-200-bg"></div>
                            <b className="var">var: --teal-200</b>
                            <span className="code">#27333B</span>
                        </div>
                        <div className="box">
                            <div className="colored teal-300-bg"></div>
                            <b className="var">var: --teal-300</b>
                            <span className="code">#2C3A44</span>
                        </div>
                        <div className="box">
                            <div className="colored teal-400-bg"></div>
                            <b className="var">var: --teal-400</b>
                            <span className="code">#32424D</span>
                        </div>
                        <div className="box">
                            <div className="colored teal-500-bg"></div>
                            <b className="var">var: --teal-500</b>
                            <span className="code">#374955</span>
                        </div>
                        <div className="box">
                            <div className="colored teal-600-bg"></div>
                            <b className="var">var: --teal-600</b>
                            <span className="code">#4B5B66</span>
                        </div>
                        <div className="box">
                            <div className="colored teal-700-bg"></div>
                            <b className="var">var: --teal-700</b>
                            <span className="code">#5F6D77</span>
                        </div>
                        <div className="box">
                            <div className="colored teal-800-bg"></div>
                            <b className="var">var: --teal-800</b>
                            <span className="code">#738088</span>
                        </div>
                        <div className="box">
                            <div className="colored teal-900bg"></div>
                            <b className="var">var: --teal-900</b>
                            <span className="code">#879299</span>
                        </div>
                        <div className="box">
                            <div className="colored teal-1000-bg"></div>
                            <b className="var">var: --teal-1000</b>
                            <span className="code">#9BA4AA</span>
                        </div>
                    </div>
                    <div className="col">
                        <h3>All shades Gray Colors</h3>
                        <div className="box">
                            <div className="colored gray-0-bg"></div>
                            <b className="var">var: --gray-0</b>
                            <span className="code">#2E3B44</span>
                        </div>

                        <div className="box">
                            <div className="colored gray-100-bg"></div>
                            <b className="var">var: --gray-100</b>
                            <span className="code">#374651</span>
                        </div>

                        <div className="box">
                            <div className="colored gray-200-bg"></div>
                            <b className="var">var: --gray-200</b>
                            <span className="code">#40525F</span>
                        </div>

                        <div className="box">
                            <div className="colored gray-300-bg"></div>
                            <b className="var">var: --gray-300</b>
                            <span className="code">#495E6C</span>
                        </div>

                        <div className="box">
                            <div className="colored gray-400-bg"></div>
                            <b className="var">var: --gray-400</b>
                            <span className="code">#52697A</span>
                        </div>

                        <div className="box">
                            <div className="colored gray-500-bg"></div>
                            <b className="var">var: --gray-500</b>
                            <span className="code">#5B7587</span>
                        </div>

                        <div className="box">
                            <div className="colored gray-600-bg"></div>
                            <b className="var">var: --gray-600</b>
                            <span className="code">#6B8393</span>
                        </div>

                        <div className="box">
                            <div className="colored gray-700-bg"></div>
                            <b className="var">var: --gray-700</b>
                            <span className="code">#7C919F</span>
                        </div>

                        <div className="box">
                            <div className="colored gray-800-bg"></div>
                            <b className="var">var: --gray-800</b>
                            <span className="code">#8C9EAB</span>
                        </div>

                        <div className="box">
                            <div className="colored gray-900-bg"></div>
                            <b className="var">var: --gray-900</b>
                            <span className="code">#9DACB7</span>
                        </div>

                        <div className="box">
                            <div className="colored gray-1000-bg"></div>
                            <b className="var">var: --gray-1000</b>
                            <span className="code">#ADBAC3</span>
                        </div>


                    </div>
                    <div className="col">
                        <h3>All shades Green Colors</h3>
                        <div className="box">
                            <div className="colored green-0-bg"></div>
                            <b className="var">var: --green-0</b>
                            <span className="code">#386753</span>
                        </div>

                        <div className="box">
                            <div className="colored green-100-bg"></div>
                            <b className="var">var: --green-100</b>
                            <span className="code">#437B64</span>
                        </div>
                        <div className="box">
                            <div className="colored green-200-bg"></div>
                            <b className="var">var: --green-100</b>
                            <span className="code">#4E9074</span>
                        </div>
                        <div className="box">
                            <div className="colored green-300-bg"></div>
                            <b className="var">var: --green-300</b>
                            <span className="code">#5AA485</span>
                        </div>
                        <div className="box">
                            <div className="colored green-400-bg"></div>
                            <b className="var">var: --green-400</b>
                            <span className="code">#65B995</span>
                        </div>
                        <div className="box">
                            <div className="colored green-500-bg"></div>
                            <b className="var">var: --green-500</b>
                            <span className="code">#70CDA6</span>
                        </div>
                        <div className="box">
                            <div className="colored green-600-bg"></div>
                            <b className="var">var: --green-600</b>
                            <span className="code">#7ED2AF</span>
                        </div>
                        <div className="box">
                            <div className="colored green-700-bg"></div>
                            <b className="var">var: --green-700</b>
                            <span className="code">#8DD7B8</span>
                        </div>
                        <div className="box">
                            <div className="colored green-800-bg"></div>
                            <b className="var">var: --green-800</b>
                            <span className="code">#9BDCC1</span>
                        </div>
                        <div className="box">
                            <div className="colored green-900-bg"></div>
                            <b className="var">var: --green-900</b>
                            <span className="code">#A9E1CA</span>
                        </div>
                        <div className="box">
                            <div className="colored green-1000-bg"></div>
                            <b className="var">var: --green-1000</b>
                            <span className="code">#B8E6D3</span>
                        </div>
                    </div>
                    <div className="col">
                        <h3>All shades Red Colors</h3>
                        <div className="box">
                            <div className="colored red-0-bg"></div>
                            <b className="var">var: --red-0</b>
                            <span className="code">#673838</span>
                        </div>

                        <div className="box">
                            <div className="colored red-100-bg"></div>
                            <b className="var">var: --red-100</b>
                            <span className="code">#7B4343</span>
                        </div>
                        <div className="box">
                            <div className="colored red-200-bg"></div>
                            <b className="var">var: --red-200</b>
                            <span className="code">#904E4E</span>
                        </div>
                        <div className="box">
                            <div className="colored red-300-bg"></div>
                            <b className="var">var: --red-300</b>
                            <span className="code">#A45A5A</span>
                        </div>
                        <div className="box">
                            <div className="colored red-400-bg"></div>
                            <b className="var">var: --red-400</b>
                            <span className="code">#B96565</span>
                        </div>
                        <div className="box">
                            <div className="colored red-500-bg"></div>
                            <b className="var">var: --red-500</b>
                            <span className="code">#CD7070</span>
                        </div>
                        <div className="box">
                            <div className="colored red-600-bg"></div>
                            <b className="var">var: --red-600</b>
                            <span className="code">#D27E7E</span>
                        </div>
                        <div className="box">
                            <div className="colored red-700-bg"></div>
                            <b className="var">var: --red-700</b>
                            <span className="code">#D78D8D</span>
                        </div>
                        <div className="box">
                            <div className="colored red-800-bg"></div>
                            <b className="var">var: --red-800</b>
                            <span className="code">#DC9B9B</span>
                        </div>
                        <div className="box">
                            <div className="colored red-900-bg"></div>
                            <b className="var">var: --red-900</b>
                            <span className="code">#E1A9A9</span>
                        </div>
                        <div className="box">
                            <div className="colored red-1000-bg"></div>
                            <b className="var">var: --red-1000</b>
                            <span className="code">#E6B8B8</span>
                        </div>
                    </div>
                    <div className="col">
                        <h3>All shades Yellow Colors</h3>
                        <div className="box">
                            <div className="colored yellow-0-bg"></div>
                            <b className="var">var: --yellow-0</b>
                            <span className="code">#675A38</span>
                        </div>

                        <div className="box">
                            <div className="colored yellow-100-bg"></div>
                            <b className="var">var: --yellow-100</b>
                            <span className="code">#7B6B43</span>
                        </div>
                        <div className="box">
                            <div className="colored yellow-200-bg"></div>
                            <b className="var">var: --yellow-200</b>
                            <span className="code">#907D4E</span>
                        </div>
                        <div className="box">
                            <div className="colored yellow-300-bg"></div>
                            <b className="var">var: --yellow-300</b>
                            <span className="code">#A48F5A</span>
                        </div>
                        <div className="box">
                            <div className="colored yellow-400-bg"></div>
                            <b className="var">var: --yellow-400</b>
                            <span className="code">#B9A165</span>
                        </div>
                        <div className="box">
                            <div className="colored yellow-500-bg"></div>
                            <b className="var">var: --yellow-500</b>
                            <span className="code">#CDB370</span>
                        </div>
                        <div className="box">
                            <div className="colored yellow-600-bg"></div>
                            <b className="var">var: --yellow-600</b>
                            <span className="code">#D2BB7E</span>
                        </div>
                        <div className="box">
                            <div className="colored yellow-700-bg"></div>
                            <b className="var">var: --yellow-700</b>
                            <span className="code">#D7C28D</span>
                        </div>
                        <div className="box">
                            <div className="colored yellow-800-bg"></div>
                            <b className="var">var: --yellow-800</b>
                            <span className="code">#DCCA9B</span>
                        </div>
                        <div className="box">
                            <div className="colored yellow-900-bg"></div>
                            <b className="var">var: --yellow-900</b>
                            <span className="code">#E1D1A9</span>
                        </div>
                        <div className="box">
                            <div className="colored yellow-1000-bg"></div>
                            <b className="var">var: --yellow-1000</b>
                            <span className="code">#E6D9B8</span>
                        </div>
                    </div>
                    <div className="col">
                        <h3>All shades Dark Colors</h3>
                        <div className="box">
                            <div className="colored dark-tr-0-bg"></div>
                            <b className="var">var: --dark-tr-0</b>
                            <span className="code">#242228CC</span>
                        </div>
                        <div className="box">
                            <div className="colored dark-0-bg"></div>
                            <b className="var">var: --dark-0</b>
                            <span className="code">#131318</span>
                        </div>

                        <div className="box">
                            <div className="colored dark-100-bg"></div>
                            <b className="var">var: --dark-100</b>
                            <span className="code">#17191D</span>
                        </div>
                        <div className="box">
                            <div className="colored dark-200-bg"></div>
                            <b className="var">var: --dark-200</b>
                            <span className="code">#1D1B20</span>
                        </div>
                        <div className="box">
                            <div className="colored dark-300-bg"></div>
                            <b className="var">var: --dark-300</b>
                            <span className="code">#242228</span>
                        </div>
                        <div className="box">
                            <div className="colored dark-400-bg"></div>
                            <b className="var">var: --dark-400</b>
                            <span className="code">#2B2930</span>
                        </div>
                        <div className="box">
                            <div className="colored dark-500-bg"></div>
                            <b className="var">var: --dark-500</b>
                            <span className="code">#36343B</span>
                        </div>
                        <div className="box">
                            <div className="colored dark-600-bg"></div>
                            <b className="var">var: --dark-600</b>
                            <span className="code">#49454F</span>
                        </div>
                        <div className="box">
                            <div className="colored dark-700-bg"></div>
                            <b className="var">var: --dark-700</b>
                            <span className="code">#938F99</span>
                        </div>
                        <div className="box">
                            <div className="colored dark-800-bg"></div>
                            <b className="var">var: --dark-800</b>
                            <span className="code">#CAC4D0</span>
                        </div>
                        <div className="box">
                            <div className="colored dark-900-bg"></div>
                            <b className="var">var: --dark-900</b>
                            <span className="code">#E6E0E9</span>
                        </div>
                        <div className="box">
                            <div className="colored dark-1000-bg"></div>
                            <b className="var">var: --dark-1000</b>
                            <span className="code">#FEF7FF</span>
                        </div>
                    </div>
                    <div className="col">
                        <h3>All shades Light Colors</h3>
                        <div className="box">
                            <div className="colored light-tr-100-bg"></div>
                            <b className="var">var: --light-tr-100</b>
                            <span className="code">#FFFFFFCC</span>
                        </div>
                        <div className="box">
                            <div className="colored light-0-bg"></div>
                            <b className="var">var: --light-0</b>
                            <span className="code">#E7F1F6</span>
                        </div>

                        <div className="box">
                            <div className="colored light-100-bg"></div>
                            <b className="var">var: --light-100</b>
                            <span className="code">#F8FAFC</span>
                        </div>
                        <div className="box">
                            <div className="colored light-200-bg"></div>
                            <b className="var">var: --light-200</b>
                            <span className="code">#E3E8EF</span>
                        </div>
                        <div className="box">
                            <div className="colored light-300-bg"></div>
                            <b className="var">var: --light-300</b>
                            <span className="code">#E6E0E9</span>
                        </div>
                        <div className="box">
                            <div className="colored light-400-bg"></div>
                            <b className="var">var: --light-400</b>
                            <span className="code">#DED8E1</span>
                        </div>
                        <div className="box">
                            <div className="colored light-500-bg"></div>
                            <b className="var">var: --light-500</b>
                            <span className="code">#7F848E</span>
                        </div>
                        <div className="box">
                            <div className="colored light-600-bg"></div>
                            <b className="var">var: --light-600</b>
                            <span className="code">#5D616C</span>
                        </div>
                        <div className="box">
                            <div className="colored light-700-bg"></div>
                            <b className="var">var: --light-700</b>
                            <span className="code">#525C76</span>
                        </div>
                        <div className="box">
                            <div className="colored light-800-bg"></div>
                            <b className="var">var: --light-800</b>
                            <span className="code">#434865</span>
                        </div>
                        <div className="box">
                            <div className="colored light-900-bg"></div>
                            <b className="var">var: --light-900</b>
                            <span className="code">#282A33</span>
                        </div>
                        <div className="box">
                            <div className="colored light-1000-bg"></div>
                            <b className="var">var: --light-1000</b>
                            <span className="code">#212327</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {/* primary button only text */}
    </>
);

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