bccdebd770
This commit introduces a comprehensive update to the theme tokens in the Cunningham package. The previous color definitions have been replaced with a new structure that includes global color tokens for branding and contextual elements. Additionally, the SCSS and JS files have been refactored to align with this new token architecture, enhancing maintainability and ensuring a cohesive design system across the application. The TypeScript configuration has also been updated to support JSX syntax.
53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react";
|
|
import React from "react";
|
|
import { tokens } from ":/cunningham-tokens";
|
|
|
|
const meta: Meta = {
|
|
title: "Misc/Spacings",
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<{}>;
|
|
|
|
export const Sizes: Story = {
|
|
render: () => {
|
|
return (
|
|
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
|
|
{Object.keys(tokens.themes.default.globals.font.sizes).map((key) => (
|
|
<div key={key} className={"clr-gray-800 fs-" + key}>
|
|
Using the <code>fs-{key}</code> class
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
export const Weights: Story = {
|
|
render: () => {
|
|
return (
|
|
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
|
|
{Object.keys(tokens.themes.default.globals.font.weights).map((key) => (
|
|
<div key={key} className={"clr-gray-800 fs-l fw-" + key}>
|
|
Using the <code>fw-{key}</code> class
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
export const Families: Story = {
|
|
render: () => {
|
|
return (
|
|
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
|
|
{Object.keys(tokens.themes.default.globals.font.families).map((key) => (
|
|
<div key={key} className={"clr-gray-800 f-" + key}>
|
|
Using the <code>f-{key}</code> class
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
},
|
|
};
|