import Layout from '../../components/Layout'
import { FoundationSidebar } from '../../sidebars'
import { Playground } from '../../components/Playground';
import { Heading, Paragraph, Code } from '@knkui/typography';
import Swatch from '../../components/Swatch';
import { colors } from '@knkui/theme';

export default function Typography() {
    return (
        <Layout
            title="Color"
            showHero
            description="Typography is our system of fonts. Each font conveys the appropriate sentiment to assist our users through each stage of their journey."
            sidebar={FoundationSidebar}
        >
            <Heading size={800}>Primary palette</Heading>

            <Swatch
                hexColor={colors.B400}
                name="B400"
            />

            <Swatch
                hexColor={colors.N800}
                name="N800"
            />

            <Swatch
                hexColor={colors.N0}
                name="N0"
            />

            <Heading size={800}>Secondary palette</Heading>

            <Swatch
                hexColor={colors.R300}
                name="R300"
            />

            <Swatch
                hexColor={colors.Y300}
                name="Y300"
            />

            <Swatch
                hexColor={colors.G300}
                name="G300"
            />

            <Swatch
                hexColor={colors.T300}
                name="T300"
            />

            <Swatch
                hexColor={colors.P300}
                name="P300"
            />

            <Heading size={800}>Extended palette</Heading>
            <Heading size={700}>Neutrals</Heading>
            <Paragraph>
                Neutrals have varying degrees of saturation that allow for the appropriate level of warmth across marketing and product.
                Typically they are used for text and subtle backgrounds when we don't want to draw too much attention to a particular touchpoint
                or convey information such as "to do" or "disabled".
            </Paragraph>
            <Heading size={700}>Dark neutrals</Heading>
            <Paragraph>
                Dark neutrals are very effective for creating contrast and are therefore the primary color used for typography.
                Occasionally the dark neutrals are found in illustration but they rarely dominate the palette.
                Some exceptions are dark mode UI elements and illustrations.
            </Paragraph>

            <Swatch
                hexColor={colors.N900}
                name="N900"
            />
            <Swatch
                hexColor={colors.N800}
                name="N800"
            />
            <Swatch
                hexColor={colors.N700}
                name="N700"
            />
            <Swatch
                hexColor={colors.N600}
                name="N600"
            />
            <Swatch
                hexColor={colors.N500}
                name="N500"
            />
            <Heading size={700}>Mid neutrals</Heading>
            <Paragraph>
                Use mid-neutrals to create depth in components such as modal dialog blankets and cards.
                Avoid mid-neutrals as background colors because there is usually not enough contrast to remain AA compliant.
                The mid-neutrals N400 to N200 can be used for subtle text and icons on light-neutral backgrounds.
                You can find text style using these colors in Typography.
            </Paragraph>
            <Swatch
                hexColor={colors.N400}
                name="N400"
            />
            <Swatch
                hexColor={colors.N300}
                name="N300"
            />
            <Swatch
                hexColor={colors.N200}
                name="N200"
            />
            <Swatch
                hexColor={colors.N100}
                name="N100"
            />
            <Swatch
                hexColor={colors.N90}
                name="N90"
            />
            <Swatch
                hexColor={colors.N80}
                name="N80"
            />
            <Swatch
                hexColor={colors.N70}
                name="N70"
            />
            <Swatch
                hexColor={colors.N60}
                name="N60"
            />

            <Heading size={700}>Light neutrals</Heading>
            <Paragraph>
                We use light neutrals as subtle backgrounds to indicate various interactive states such as hover and disabled,
                or simply to create secondary attention towards a component. You'll find light neutrals in buttons, text fields, tags, and illustrations.
            </Paragraph>
            <Swatch
                hexColor={colors.N50}
                name="N50"
            />
            <Swatch
                hexColor={colors.N40}
                name="N40"
            />
            <Swatch
                hexColor={colors.N30}
                name="N30"
            />
            <Swatch
                hexColor={colors.N20}
                name="N20"
            />
            <Swatch
                hexColor={colors.N10}
                name="N10"
            />
            <Swatch
                hexColor={colors.N0}
                name="N0"
            />

            <Heading size={700}>Red</Heading>
            <Paragraph>
                Red is mainly used for backgrounds in messages and in error states to draw attention to important information or actions that are destructive or block workflow.
            </Paragraph>
            <Swatch
                hexColor={colors.R500}
                name="R500"
            />
            <Swatch
                hexColor={colors.R400}
                name="R400"
            />
            <Swatch
                hexColor={colors.R300}
                name="R300"
            />
            <Swatch
                hexColor={colors.R200}
                name="R200"
            />
            <Swatch
                hexColor={colors.R100}
                name="R100"
            />
            <Swatch
                hexColor={colors.R75}
                name="R75"
            />
            <Swatch
                hexColor={colors.R50}
                name="R50"
            />
            <Heading size={700}>Yellow</Heading>
            <Paragraph>
                Yellow indicates a warning or that progress is impeded. Yellow feels right at home in components like lozenges, banners, flag messages, and buttons.
            </Paragraph>
            <Swatch
                hexColor={colors.Y500}
                name="Y500"
            />
            <Swatch
                hexColor={colors.Y400}
                name="Y400"
            />
            <Swatch
                hexColor={colors.Y300}
                name="Y300"
            />
            <Swatch
                hexColor={colors.Y200}
                name="Y200"
            />
            <Swatch
                hexColor={colors.Y100}
                name="Y100"
            />
            <Swatch
                hexColor={colors.Y75}
                name="Y75"
            />
            <Swatch
                hexColor={colors.Y50}
                name="Y50"
            />

            <Heading size={700}>Green</Heading>
            <Paragraph>
                We use green to indicate success or to celebrate a win.
                Keep in mind that our green is very vibrant, which can cause eye strain in large doses.
                However, because of this vibrancy, it can also stand out well among many other elements on a page,
                which is why it is a good choice for calls-to-action and buttons in marketing.
            </Paragraph>
            <Swatch
                hexColor={colors.G500}
                name="G500"
            />
            <Swatch
                hexColor={colors.G400}
                name="G400"
            />
            <Swatch
                hexColor={colors.G300}
                name="G300"
            />
            <Swatch
                hexColor={colors.G200}
                name="G200"
            />
            <Swatch
                hexColor={colors.G100}
                name="G100"
            />
            <Swatch
                hexColor={colors.G75}
                name="G75"
            />
            <Swatch
                hexColor={colors.G50}
                name="G50"
            />

            <Heading size={700}>Blue</Heading>
            <Paragraph>
                Blue is used to help us reinforce our presence and unify our touchpoints from marketing to product. 
                When used appropriately and accurately, the colors have an incredible impact.
            </Paragraph>
            <Paragraph>
                Blue is used to indicate authentication, connectivity, or progress.
            </Paragraph>

            <Swatch
                hexColor={colors.B500}
                name="B500"
            />
            <Swatch
                hexColor={colors.B400}
                name="B400"
            />
            <Swatch
                hexColor={colors.B300}
                name="B300"
            />
            <Swatch
                hexColor={colors.B200}
                name="B200"
            />
            <Swatch
                hexColor={colors.B100}
                name="B100"
            />
            <Swatch
                hexColor={colors.B75}
                name="B75"
            />
            <Swatch
                hexColor={colors.B50}
                name="B50"
            />
        </Layout>
    )
}