├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── README.md ├── demo ├── components │ └── Modal │ │ ├── Modal.module.css │ │ ├── Modal.tsx │ │ ├── Modal.types.ts │ │ ├── index.ts │ │ └── tests │ │ ├── Modal.stories.tsx │ │ ├── Modal.test.tsx │ │ └── __snapshots__ │ │ └── Modal.test.tsx.snap ├── tokens.json └── tokens │ ├── $metadata.json │ ├── $themes.json │ ├── Dark.json │ └── Light.json └── examples ├── integration-tailwind ├── index.html ├── package.json ├── postcss.config.cjs ├── src │ ├── App.tsx │ ├── components │ │ └── Demo │ │ │ ├── Demo.tsx │ │ │ └── index.ts │ ├── favicon.svg │ ├── icons │ │ ├── Bookmark.tsx │ │ ├── Clock.tsx │ │ ├── CloseSquare.tsx │ │ ├── Message.tsx │ │ ├── Moon.tsx │ │ ├── More.tsx │ │ ├── Share.tsx │ │ ├── Sun.tsx │ │ ├── ThumbsUp.tsx │ │ ├── UserCheck.tsx │ │ ├── UserMinus.tsx │ │ └── Users.tsx │ ├── index.css │ ├── main.tsx │ └── vite-env.d.ts ├── tailwind.config.cjs ├── tsconfig.json ├── vite.config.ts └── yarn.lock ├── starter-cra ├── .gitignore ├── README.md ├── craco.config.js ├── package.json ├── postcss.config.js ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.css │ ├── App.tsx │ ├── components │ │ └── Demo │ │ │ ├── Demo.module.css │ │ │ ├── Demo.tsx │ │ │ └── index.ts │ ├── index.tsx │ ├── logo.svg │ ├── react-app-env.d.ts │ └── setupTests.ts ├── tsconfig.json └── yarn.lock ├── starter-next ├── .eslintrc.json ├── .gitignore ├── .prettierrc ├── README.md ├── app │ ├── layout.tsx │ └── page.tsx ├── components │ ├── App │ │ ├── App.css │ │ ├── App.tsx │ │ └── index.ts │ └── Demo │ │ ├── Demo.module.css │ │ ├── Demo.tsx │ │ └── index.ts ├── next-env.d.ts ├── next.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ ├── favicon.ico │ └── vercel.svg ├── tailwind.config.js └── tsconfig.json ├── starter-remix ├── .eslintrc.cjs ├── .gitignore ├── .prettierrc ├── README.md ├── app │ ├── components │ │ └── Demo │ │ │ ├── Demo.module.css │ │ │ ├── Demo.tsx │ │ │ └── index.ts │ ├── root.tsx │ └── routes │ │ └── _index.tsx ├── entry.server.tsx ├── env.d.ts ├── package-lock.json ├── package.json ├── postcss.config.js ├── public │ └── favicon.ico ├── tsconfig.json └── vite.config.js ├── starter-vite ├── .gitignore ├── index.html ├── package.json ├── postcss.config.cjs ├── src │ ├── App.tsx │ ├── components │ │ └── Demo │ │ │ ├── Demo.module.css │ │ │ ├── Demo.tsx │ │ │ └── index.ts │ ├── favicon.svg │ ├── icons │ │ ├── Bookmark.tsx │ │ ├── Clock.tsx │ │ ├── CloseSquare.tsx │ │ ├── Message.tsx │ │ ├── Moon.tsx │ │ ├── More.tsx │ │ ├── Share.tsx │ │ ├── Sun.tsx │ │ ├── ThumbsUp.tsx │ │ ├── UserCheck.tsx │ │ ├── UserMinus.tsx │ │ └── Users.tsx │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json ├── vite.config.ts └── yarn.lock └── starter-webpack ├── .gitignore ├── README.md ├── package.json ├── postcss.config.js ├── src ├── components │ └── Demo │ │ ├── Demo.module.css │ │ ├── Demo.tsx │ │ └── index.ts ├── custom.d.ts ├── index.html └── index.tsx ├── tsconfig.json ├── webpack.config.js └── yarn.lock /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create an issue you found while using Reshaped 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Create an isolated reproduction on the CodeSandox: 15 | https://codesandbox.io/s/reshaped-typescript-zj57hm 16 | 17 | **Expected behavior** 18 | A clear and concise description of what you expected to happen. 19 | 20 | **Screenshots** 21 | If applicable, add screenshots to help explain your problem. 22 | 23 | **Environment (please complete the following information):** 24 | - OS: [e.g. iOS] 25 | - Browser [e.g. chrome, safari] 26 | - Version [e.g. 22] 27 | 28 | **Additional context** 29 | Add any other context about the problem here. 30 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | vendor/*.tgz 2 | .DS_Store 3 | node_modules 4 | dist 5 | 6 | .parcel-cache 7 | .cache -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Reshaped public repository 2 | 3 | This is a multi-purpose public repository for [Reshaped](https://reshaped.so). 4 | 5 | It contains [examples of the project setups](./examples/) using Reshaped together with different build tools and frameworks. 6 | We're working hard on making sure it works with the most possible amount of popular technologies while still following our principle of staying as close as possible to native browser technologies. 7 | 8 | Our future plans for the upcoming releases can be found in [our roadmap](https://github.com/orgs/formaat-design/projects/2/views/1). 9 | 10 | --- 11 | 12 | Reshaped React package is available for free on NPM. 13 | 14 | ``` 15 | npm install reshaped 16 | ``` 17 | 18 | You can find installation guidelines in our documentation: https://reshaped.so/docs/getting-started/react/installation 19 | 20 | Reshaped Figma library and source code environment licenses are sitributed through our [website](https://reshaped.so). 21 | 22 | -------------------------------------------------------------------------------- /demo/components/Modal/Modal.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | --_s: calc(var(--rs-unit-x1) * 100); 3 | transition: transform var(--rs-easing-accelerate) var(--rs-duration-medium); 4 | pointer-events: none; 5 | position: fixed; 6 | inset: 0; 7 | max-width: 100vw; 8 | } 9 | 10 | .inner { 11 | --_p: 4; 12 | --_p-m: var(--_p); 13 | --_p-l: var(--_p-m); 14 | --_p-xl: var(--_p-l); 15 | width: 100%; 16 | pointer-events: all; 17 | padding: var(--rs-modal-padding); 18 | background: var(--rs-color-background-elevated); 19 | color: var(--rs-color-foreground-neutral); 20 | box-shadow: var(--rs-shadow-elevated); 21 | overflow: auto; 22 | } 23 | 24 | .inner { 25 | --rs-modal-padding: calc(var(--rs-unit-x1) * var(--_p)); 26 | } 27 | 28 | @each $viewport, $padding in (m, l, xl), (var(--_p-m), var(--_p-l), var(--_p-xl)) { 29 | @media (--rs-viewport-$(viewport)) { 30 | .inner { 31 | --rs-modal-padding: calc(var(--rs-unit-x1) * $(padding)); 32 | } 33 | } 34 | } 35 | 36 | .root.--position-center { 37 | width: var(--_s); 38 | padding: var(--rs-unit-x4); 39 | transform: scale(0.96); 40 | position: relative; 41 | 42 | & .inner { 43 | border-radius: var(--rs-unit-radius-large); 44 | overflow: hidden; 45 | } 46 | 47 | &.--active { 48 | transition-timing-function: var(--rs-easing-decelerate); 49 | transform: scale(1); 50 | } 51 | } 52 | 53 | .root.--position-bottom { 54 | --_s: auto; 55 | inset-block-start: auto; 56 | transform: translate(0, 100%); 57 | padding-top: var(--rs-unit-x4); 58 | height: var(--_s); 59 | 60 | & .inner { 61 | border-radius: var(--rs-unit-radius-large) var(--rs-unit-radius-large) 0 0; 62 | } 63 | 64 | &.--active { 65 | &, 66 | [dir="rtl"] & { 67 | transition-timing-function: var(--rs-easing-decelerate); 68 | transform: translate(0, 0); 69 | } 70 | } 71 | } 72 | 73 | .root.--position-start { 74 | inset-inline-end: auto; 75 | padding-inline-end: var(--rs-unit-x4); 76 | transform: translate(-100%, 0); 77 | width: var(--_s); 78 | 79 | & .inner { 80 | height: 100vh; 81 | } 82 | 83 | [dir="rtl"] & { 84 | transform: translate(100%, 0); 85 | } 86 | 87 | &.--active { 88 | &, 89 | [dir="rtl"] & { 90 | transition-timing-function: var(--rs-easing-decelerate); 91 | transform: translate(0, 0); 92 | } 93 | } 94 | } 95 | 96 | .root.--position-end { 97 | inset-inline-start: auto; 98 | padding-inline-start: var(--rs-unit-x4); 99 | transform: translate(100%, 0); 100 | width: var(--_s); 101 | 102 | & .inner { 103 | height: 100vh; 104 | } 105 | 106 | [dir="rtl"] & { 107 | transform: translate(-100%, 0); 108 | } 109 | 110 | &.--active { 111 | &, 112 | [dir="rtl"] & { 113 | transition-timing-function: var(--rs-easing-decelerate); 114 | transform: translate(0, 0); 115 | } 116 | } 117 | } -------------------------------------------------------------------------------- /demo/components/Modal/Modal.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { classNames, responsiveVariables } from "utilities/helpers"; 3 | import Text from "components/Text"; 4 | import Backdrop from "components/Backdrop"; 5 | import useElementId from "hooks/useElementId"; 6 | import type * as T from "./Modal.types"; 7 | import s from "./Modal.module.css"; 8 | 9 | const Context = React.createContext({ 10 | id: "", 11 | titleMounted: false, 12 | setTitleMounted: () => {}, 13 | subtitleMounted: false, 14 | setSubtitleMounted: () => {}, 15 | }); 16 | const useModal = () => React.useContext(Context); 17 | 18 | const ModalTitle = (props: T.TitleProps) => { 19 | const { children } = props; 20 | const { id, setTitleMounted } = useModal(); 21 | 22 | React.useEffect(() => { 23 | setTitleMounted(true); 24 | return () => setTitleMounted(false); 25 | }, [setTitleMounted]); 26 | 27 | return ( 28 | 29 | {children} 30 | 31 | ); 32 | }; 33 | 34 | const ModalSubtitle = (props: T.SubtitleProps) => { 35 | const { children } = props; 36 | const { id, setSubtitleMounted } = useModal(); 37 | 38 | React.useEffect(() => { 39 | setSubtitleMounted(true); 40 | return () => setSubtitleMounted(false); 41 | }, [setSubtitleMounted]); 42 | 43 | return ( 44 | 45 | {children} 46 | 47 | ); 48 | }; 49 | 50 | const Modal = (props: T.Props) => { 51 | const { 52 | children, 53 | onClose, 54 | onOpen, 55 | active, 56 | size, 57 | padding, 58 | position = "center", 59 | className, 60 | attributes, 61 | } = props; 62 | const id = useElementId(); 63 | const [titleMounted, setTitleMounted] = React.useState(false); 64 | const [subtitleMounted, setSubtitleMounted] = React.useState(false); 65 | 66 | const value = React.useMemo( 67 | () => ({ 68 | titleMounted, 69 | setTitleMounted, 70 | subtitleMounted, 71 | setSubtitleMounted, 72 | id, 73 | }), 74 | [id, subtitleMounted, titleMounted] 75 | ); 76 | 77 | return ( 78 | 79 | {({ active }) => { 80 | const rootClassNames = classNames( 81 | s.root, 82 | className, 83 | active && s["--active"], 84 | position && s[`--position-${position}`] 85 | ); 86 | return ( 87 | 88 |
97 |
98 | {children} 99 |
100 |
101 | 102 | ); 103 | }} 104 | 105 | ); 106 | }; 107 | 108 | Modal.Title = ModalTitle; 109 | Modal.Subtitle = ModalSubtitle; 110 | export default Modal; 111 | -------------------------------------------------------------------------------- /demo/components/Modal/Modal.types.ts: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import type * as G from "types/global"; 3 | 4 | export type Context = { 5 | id: string; 6 | titleMounted: boolean; 7 | setTitleMounted: (b: boolean) => void; 8 | subtitleMounted: boolean; 9 | setSubtitleMounted: (b: boolean) => void; 10 | }; 11 | 12 | export type TitleProps = { 13 | children: React.ReactNode; 14 | }; 15 | 16 | export type SubtitleProps = { 17 | children: React.ReactNode; 18 | }; 19 | 20 | export type Props = { 21 | children?: React.ReactNode; 22 | position?: "center" | "end" | "bottom" | "start"; 23 | size?: string; 24 | padding?: G.Responsive; 25 | active?: boolean; 26 | onOpen?: () => void; 27 | onClose?: () => void; 28 | className?: string; 29 | attributes?: G.Attributes, keyof Props>; 30 | }; 31 | -------------------------------------------------------------------------------- /demo/components/Modal/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./Modal"; 2 | export { Props as ModalProps } from "./Modal.types"; 3 | -------------------------------------------------------------------------------- /demo/components/Modal/tests/Modal.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Modal from "components/Modal"; 3 | import Stack from "components/Stack"; 4 | import Button from "components/Button"; 5 | import Dismissible from "components/Dismissible"; 6 | import DropdownMenu from "components/DropdownMenu"; 7 | import Switch from "components/Switch"; 8 | import TextField from "components/TextField"; 9 | import useToggle from "hooks/useToggle"; 10 | 11 | export default { title: "Components/Modal" }; 12 | 13 | const Example = (props: any) => { 14 | const { active: activeProp, title, subtitle, ...modalProps } = props; 15 | const { active, activate, deactivate } = useToggle(activeProp); 16 | 17 | return ( 18 | <> 19 | 20 | 21 | 22 | {(title || subtitle) && ( 23 | 24 | {title && {title}} 25 | {subtitle && {subtitle}} 26 | 27 | )} 28 | Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing 29 | industries for previewing layouts and visual mockups. 30 | 31 | 32 | 33 | 34 | 35 | 36 | ); 37 | }; 38 | 39 | export const sizes = () => ( 40 | <> 41 | 42 | 43 | 44 | 45 | 46 |
47 | 48 | ); 49 | 50 | export const customPadding = () => ( 51 | <> 52 | 53 | 54 | 55 | 56 | 57 |
58 | 59 | ); 60 | 61 | export const positions = () => ( 62 | <> 63 | 64 | 65 | 66 | 67 | 68 | 69 |
70 | 71 | ); 72 | 73 | export const composition = () => ; 74 | 75 | export const testNestedTrap = () => { 76 | const { active, activate, deactivate } = useToggle(); 77 | 78 | return ( 79 | <> 80 | 81 | 82 | {(attributes) => } 83 | 84 | 85 | Open dialog 86 | Item 2 87 | 88 | 89 | 90 | 91 | 92 | 93 | {(attributes) => } 94 | 95 | 96 | Item 1 97 | Item 2 98 | 99 | 100 | 101 | 102 | 103 | 104 | ); 105 | }; 106 | -------------------------------------------------------------------------------- /demo/components/Modal/tests/Modal.test.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render, screen, waitFor, fireEvent } from "@testing-library/react"; 3 | import userEvent from "@testing-library/user-event"; 4 | import Modal from "components/Modal"; 5 | 6 | const fixtures = { 7 | content: "Content", 8 | title: "Title", 9 | subtitle: "Subtitle", 10 | className: "test-className", 11 | id: "test-id", 12 | }; 13 | 14 | describe("Components/Modal", () => { 15 | test("doesn't render children", () => { 16 | render({fixtures.content}); 17 | 18 | expect(screen.queryByText(fixtures.content)).not.toBeInTheDocument(); 19 | }); 20 | 21 | test("renders correctly when active", () => { 22 | render( 23 | 24 | {fixtures.title} 25 | {fixtures.subtitle} 26 | {fixtures.content} 27 | 28 | ); 29 | 30 | const elModal = screen.getByRole("dialog"); 31 | const elTitle = screen.getByText(fixtures.title); 32 | const elSubtitle = screen.getByText(fixtures.subtitle); 33 | const titleId = elTitle.getAttribute("id"); 34 | const subtitleId = elSubtitle.getAttribute("id"); 35 | 36 | expect(elModal).toBeInTheDocument(); 37 | expect(elTitle).toBeInTheDocument(); 38 | expect(elSubtitle).toBeInTheDocument(); 39 | expect(titleId).toMatchSnapshot(); 40 | expect(subtitleId).toMatchSnapshot(); 41 | 42 | expect(elModal).toHaveAttribute("aria-modal", "true"); 43 | expect(elModal).toHaveAttribute("aria-labelledby", titleId); 44 | expect(elModal).toHaveAttribute("aria-describedby", subtitleId); 45 | }); 46 | 47 | test("works with className and attributes", () => { 48 | render( 49 | 50 | {fixtures.content} 51 | 52 | ); 53 | 54 | const elModal = screen.getByRole("dialog"); 55 | 56 | expect(elModal).toHaveClass(fixtures.className); 57 | expect(elModal).toHaveAttribute("id", fixtures.id); 58 | }); 59 | 60 | test("works as controlled", async () => { 61 | const handleCloseMock = jest.fn(); 62 | const handleOpenMock = jest.fn(); 63 | 64 | const Component = () => { 65 | const [active, setActive] = React.useState(true); 66 | 67 | const handleOpen = () => { 68 | setActive(true); 69 | handleOpenMock(); 70 | }; 71 | 72 | const handleClose = () => { 73 | setActive(false); 74 | handleCloseMock(); 75 | }; 76 | 77 | return ( 78 | <> 79 | 82 | 83 | {fixtures.content} 84 | 85 | 86 | ); 87 | }; 88 | render(); 89 | 90 | expect(screen.queryByText(fixtures.content)).toBeInTheDocument(); 91 | expect(handleOpenMock).not.toBeCalled(); 92 | 93 | await userEvent.keyboard("{Escape}"); 94 | fireEvent.transitionEnd(screen.getByText(fixtures.content)); 95 | 96 | await waitFor(() => { 97 | expect(handleCloseMock).toBeCalledTimes(1); 98 | expect(screen.queryByText(fixtures.content)).not.toBeInTheDocument(); 99 | }); 100 | 101 | const elButton = screen.getByText("Open"); 102 | 103 | await userEvent.click(elButton); 104 | 105 | expect(handleOpenMock).toBeCalledTimes(1); 106 | expect(screen.getByText(fixtures.content)).toBeInTheDocument(); 107 | }); 108 | }); 109 | -------------------------------------------------------------------------------- /demo/components/Modal/tests/__snapshots__/Modal.test.tsx.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Components/Modal renders correctly when active 1`] = `"__reshaped-4-title"`; 4 | 5 | exports[`Components/Modal renders correctly when active 2`] = `"__reshaped-4-subtitle"`; 6 | -------------------------------------------------------------------------------- /demo/tokens.json: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /demo/tokens/$metadata.json: -------------------------------------------------------------------------------- 1 | { 2 | "tokenSetOrder": [ 3 | "Light", 4 | "Dark" 5 | ] 6 | } -------------------------------------------------------------------------------- /demo/tokens/$themes.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "579c9eb74f32ac563ee8ba1689e8d3976036c629", 4 | "name": "Light", 5 | "selectedTokenSets": { 6 | "Light": "enabled", 7 | "Dark": "disabled" 8 | }, 9 | "$figmaStyleReferences": { 10 | "Display large": "S:84cd2c62e4bee6bc2eb7b1109fded3540ef28963,", 11 | "Display medium": "S:b8005a607dfbb655a314bdba2acddc33a3177b69,", 12 | "Display small": "S:0e184d6ee3d495bbfab8cee5c4ece8a5729c0d1a,", 13 | "Title large": "S:7a9b2fe08db9fb0766a5b82c4f267049a7b789d9,", 14 | "Title medium": "S:ec194f55d81a0612bf2f2fba6b33ec3c89774af8,", 15 | "Title small": "S:5fb3021186d88eee0496a8e89c4fc2a35f167059,", 16 | "Featured large.Regular": "S:bec862f896b8a30235c89d26ad59e6bba06865c1,", 17 | "Featured large.Medium": "S:006a0d20bdd95fd4cd6461248247ba3ec0a4ce40,", 18 | "Featured large.Bold": "S:a4976c6559569e2dfa0c01244b5916c5e8769ade,", 19 | "Featured medium.Regular": "S:6e541db52a6f7f9cda01f2d61c134a8fd95a2922,", 20 | "Featured medium.Medium": "S:bbf501efb05194882682e78623d501615b15d5ec,", 21 | "Featured medium.Bold": "S:abc3ef212d00c05c665f57f95edc91496aa9609f,", 22 | "Featured small.Regular": "S:126ae9241137efa0aad055f994c866a1a31abae6,", 23 | "Featured small.Medium": "S:2db48d48b3720bbb522069e824c67f982c702172,", 24 | "Featured small.Bold": "S:2515a2226d06d71535ee84b6cc2dd5008f7b9ebc,", 25 | "Body large.Regular": "S:36c353d084916fbdfdc608d31c34fb9dc554c7b1,", 26 | "Body large.Medium": "S:6e487f33ceb81b438d9eacbdb76e5c63ab9cc952,", 27 | "Body large.Bold": "S:a68339376158c3267e70ce569b7c2003d9102e53,", 28 | "Body medium.Regular": "S:88e4ad02f03c25cded0c72f9978453200423322d,", 29 | "Body medium.Medium": "S:a7a42305049da88a74ef9dcc6823f68833c75465,", 30 | "Body medium.Bold": "S:aa0a110d9afacd48cfb63ed95bab4252822e4eae,", 31 | "Body small.Regular": "S:cdbe5d61546fb318e3b72af38cb6af11df895142,", 32 | "Body small.Medium": "S:f0c8ee615aa9ec062e60bb4b07699e1cf42ddd19,", 33 | "Body small.Bold": "S:03ce5253006787afc7c8fa173096f3d1c9022bc2,", 34 | "Caption large.Regular": "S:eab453dfba9498b1b37547fed9d32045e419dd28,", 35 | "Caption large.Medium": "S:c1881f37195332aad7656a125daf095f46b77cc5,", 36 | "Caption large.Bold": "S:359b807e24114970bf2d9970326af5762b2b8826,", 37 | "Caption medium.Regular": "S:8bd65492b7f760ee35b9ab86beb7d6e061fcfb54,", 38 | "Caption medium.Medium": "S:70e41b48bea9dc9c59c9d0138eed40a8a81fa051,", 39 | "Caption medium.Bold": "S:c6eeb8e82f7bdd6afcb505537abe7c58d6d1fcad,", 40 | "Foreground.Neutral": "S:36b4fdc7e51c7813d3916d1484657b571ca1a32d,", 41 | "Foreground.Neutral faded": "S:b52294b7f5920e053cd3c66777da899f559031ce,", 42 | "Foreground.Primary": "S:7144aea2d8f9429c66a049f8aeec96b3f663f1bb,", 43 | "Foreground.Critical": "S:838c82b6a5ed41735f717027844f3ad8ef468859,", 44 | "Foreground.Positive": "S:d583fe50273c6185032394867aae993152c0bacf,", 45 | "Foreground.Disabled": "S:98b1e3ac28b75debca1d7e4adc32a98cbaabc128,", 46 | "Background.Elevation base": "S:e4203633d2c9ff2edf8807270a7b393e0d4d3ff5,", 47 | "Background.Elevation raised": "S:3754de128774dee7f7a8e368b63394d2dd2d6081,", 48 | "Background.Elevation overlay": "S:56a256b84ea3f15eea964b3b2e61b0a241a78814,", 49 | "Background.Neutral": "S:8b55424e47aba0e5f87cbf6ceb4508918d375c95,", 50 | "Background.Neutral faded": "S:9a50f4f74793a53d1258f1779520c2cdda787246,", 51 | "Background.Neutral highlighted": "S:13785e24a609f15b6f1d2ac48bf26092898a59c6,", 52 | "Background.Primary": "S:03481c3b635a7f153ac936f2190dc3d7ca6bb320,", 53 | "Background.Primary faded": "S:14c8b2850977a587db25fd0949fe77da9f746506,", 54 | "Background.Primary highlighted": "S:335bdf7c14b0e7a9769446c5f1762ac791ddb97d,", 55 | "Background.Critical": "S:ea758f671dc8538bc6e60bedacabee065068b208,", 56 | "Background.Critical faded": "S:d8ceddaf1144fe8624edeeec4277e051270729ab,", 57 | "Background.Critical highlighted": "S:aa59e04c6bbf7460a3dd0448a079951fc037c6ce,", 58 | "Background.Positive": "S:75bde5fa6f2152aa4fd74d7bca78c7b43201452f,", 59 | "Background.Positive faded": "S:7dca103b14d1d34be4c00510e672405594c1ce82,", 60 | "Background.Positive highlighted": "S:7694c35000d033fedca1fc405d2f16c171b90a52,", 61 | "Background.Disabled": "S:6142ff4268a3c073ba9e08bde8c286408b9f974b,", 62 | "Background.Disabled faded": "S:86f06930694de441671808c000296b2884f91c4c,", 63 | "Background.Page": "S:497430af521f2c395a555dbb0e7e45eb9cb1d8bd,", 64 | "Background.Page faded": "S:806c191a75f56e2e6dd28306ea80f9ecbd9792d4,", 65 | "Border.Neutral": "S:cfaaab85587b97df8379db76a09b3a11a3fe5e9f,", 66 | "Border.Neutral faded": "S:08eb816672bdd44a85598e4cbefc0ab2082ae95d,", 67 | "Border.Primary": "S:cfe01a2488c0a5a72562c4aa88982a8d91db24b2,", 68 | "Border.Primary faded": "S:1c35f11d6652e958baf3b839894d2d6b930b3a7b,", 69 | "Border.Critical": "S:5f12aca5cd4c581bc6f9ddc79473a06799b7ee77,", 70 | "Border.Critical faded": "S:fc2cb220e8a1a65825d3841ef77f4e84e2dd78d5,", 71 | "Border.Positive": "S:c66b0199f036245d686fe941ff23737ec255ec21,", 72 | "Border.Positive faded": "S:efb6967460b784a7aab4e87d07ac465439c52bdb,", 73 | "Border.Disabled": "S:84cc75df09f7641a241961efe2fbb2a860d99db0,", 74 | "On background.Neutral": "S:0769d802ae8f0ba01bd4eb897b872b0c3bbaa0fc,", 75 | "On background.Primary": "S:887a43063e32d357bcc8ccab5bbb561296fcfe8d,", 76 | "On background.Critical": "S:d1ffdb065521ac419562391c0439fee59254d49f,", 77 | "On background.Positive": "S:f2c72d03ee8c417ace8291979b3d7404ac21797b,", 78 | "On background.Neutral highlighted": "S:e02aea4c54c217408d725b0844d37152983165a3,", 79 | "On background.Primary highlighted": "S:bc4d78eb622de5eeed6a47d316c7b07ece488a7f,", 80 | "On background.Critical highlighted": "S:f8c3a9d418eadd54632ed7f69062f760ed99657f,", 81 | "On background.Positive highlighted": "S:c7c1a610cbe0c5487b8889bf0e3468eb1c1eccbb,", 82 | "Persistent.Black": "S:e9e7fe47655a236bd17de33cd1a2b9c4461c97a4,", 83 | "Persistent.White": "S:88bf239dee8aa3634928390f186c441dc2ee26af,", 84 | "Raised": "S:5cbad91c3f3741d95953609ed1430a13ab8dd4bf,", 85 | "Overlay": "S:fd6214373ddf228a300cef77f2fd0feb9f17127e,", 86 | "Raised reverse": "S:e3af38004c679449becb1c82c9643e34fe201d8b,", 87 | "Overlay reverse": "S:52b2b52701cf7c62cb80652dcbc60e9a832acce7," 88 | } 89 | }, 90 | { 91 | "id": "d7cc2d835ffdcdb6b57500e27a5a0b88f0b09e09", 92 | "name": "Dark", 93 | "selectedTokenSets": { 94 | "Dark": "enabled" 95 | }, 96 | "$figmaStyleReferences": { 97 | "Display large": "S:067b3922e942481e33d271387d2d60ffa7c43a47,", 98 | "Display medium": "S:b9f13ba8aa5c40d2bdb0bbbf08913309e658fd2e,", 99 | "Display small": "S:797c860c7f2118f6bdfaeeb189f4bc1e846e5709,", 100 | "Title large": "S:af1d282942df6af2c6cdf903962503f569508762,", 101 | "Title medium": "S:83ab1965ed5dd133ccbfe22201ca7d381cbf9ced,", 102 | "Title small": "S:1bf435612b3c55a3a001b99f211998e0ab400b4f,", 103 | "Featured large.Regular": "S:4159dce3759c8d48d91dcff979a31da7283bc17e,", 104 | "Featured large.Medium": "S:ae18daea11ff7ec874e6891ce41f334a9105aa14,", 105 | "Featured large.Bold": "S:9689c5a2f69512abc775912e48b74935b6e142c3,", 106 | "Featured medium.Regular": "S:08d917b727094e626a34b03fd7dab0cd388895b7,", 107 | "Featured medium.Medium": "S:81830c449eeb70daa166cb8a8d2692f573fbca00,", 108 | "Featured medium.Bold": "S:991f390dacee171d4a73f1148441d0139e9efedd,", 109 | "Featured small.Regular": "S:6af8a576e7f1b0c1444ad0c9935e33c8856bdf36,", 110 | "Featured small.Medium": "S:64cf382e7b6265a2e1bc72e342cc8b2776788800,", 111 | "Featured small.Bold": "S:2ddeaca660c12c9032ecf390e13de23897899b1a,", 112 | "Body large.Regular": "S:2272471537bfadfbaf9309c937ccd755547d3a8d,", 113 | "Body large.Medium": "S:a6004c84452df5fe9b3c3e4c7a1b65d2870c8710,", 114 | "Body large.Bold": "S:5891eee51566e0339eb1ed16d80a0cc76a5b0f52,", 115 | "Body medium.Regular": "S:e537c76d48b78ae2085a49778843bd9ee754ab99,", 116 | "Body medium.Medium": "S:1eb741717e48d914863d1ce3e9be261db2a07597,", 117 | "Body medium.Bold": "S:fc993cf5512847641d65d0ceedbccff184127ebe,", 118 | "Body small.Regular": "S:b2322255a824b14efdd3dcb0f3e60e9b319eb595,", 119 | "Body small.Medium": "S:36e3c5a91f6d41b5c868b587c64bf784252f8bfd,", 120 | "Body small.Bold": "S:d63f847253b8fa90cd44d2a6fa7a497a8c50e379,", 121 | "Caption large.Regular": "S:dc41579d07af0a83455a3f472177a436ce188935,", 122 | "Caption large.Medium": "S:1f9cb7f49f7841a67d0afd7c08c90365a45f8562,", 123 | "Caption large.Bold": "S:7185eae1caa9a17062a9e928356b35d6c602e611,", 124 | "Caption medium.Regular": "S:5b33f68d3ca1697ed697f996952f056ef96aee00,", 125 | "Caption medium.Medium": "S:7ec833cb4d0e627535d91f2941d50fd1f55c92c9,", 126 | "Caption medium.Bold": "S:d96aea9e4cae944be83d5894645d6f19ec65ada5,", 127 | "Foreground.Neutral": "S:7a0f48ddbb9181052e7e9e16e98f237bd84aea27,", 128 | "Foreground.Neutral faded": "S:2bcfb927da5b504747e156f58d6114238d820812,", 129 | "Foreground.Primary": "S:73bacb09553263a566e40d11b84b09ba78e8dc33,", 130 | "Foreground.Critical": "S:d31199c6494a9c78fef782359c1a567c1bdf56d7,", 131 | "Foreground.Positive": "S:e0343f00ec9357aeb12dd26a2e4389b2bb181641,", 132 | "Foreground.Disabled": "S:5f4077d8b228f99cc2886ae6057897b3647934a2,", 133 | "Background.Elevation base": "S:0b508738ca234eb61234552a9ce2029744958d75,", 134 | "Background.Elevation raised": "S:2bd3d5dfeebe2d2c71b82d84ffbdbb226eb3fec2,", 135 | "Background.Elevation overlay": "S:832113932b05b9bdf5fee774554c6006f24adaeb,", 136 | "Background.Neutral": "S:d0642258f8da03d77b0a2e61184236d320f96c64,", 137 | "Background.Neutral faded": "S:5b24ad180d17ba1faa03f14a6ba5ecdfb97a1214,", 138 | "Background.Neutral highlighted": "S:521c06902d5aa32963bf5b769d8bf0e9b0388f00,", 139 | "Background.Primary": "S:0117f2c662cdf581927aea3795cbd7c01ab8e953,", 140 | "Background.Primary faded": "S:620ec51f88ffde95b71043b52cb7b6ee3fe91779,", 141 | "Background.Primary highlighted": "S:0fca03f03bba57195b33c257a14f280f4865c914,", 142 | "Background.Critical": "S:1e3ecb578c03d49c399c35f3a6766f15f67ca809,", 143 | "Background.Critical faded": "S:92056c20e75ae85bb3fe5b9f53e9a70bbf8eea4e,", 144 | "Background.Critical highlighted": "S:9162fa691046eb2436ee740b5b7b4a759eee195e,", 145 | "Background.Positive": "S:6646cbc59fcb3ae15d7ade07a27b09155c28c9be,", 146 | "Background.Positive faded": "S:0ce24533eb54a3e7cc0b1fede732ca99085eb835,", 147 | "Background.Positive highlighted": "S:0e8b2a6918083e06dab7f9e82387a73495ce3c93,", 148 | "Background.Disabled": "S:61f66caf9f9fdf5e9744464a3c191e90dcb10573,", 149 | "Background.Disabled faded": "S:6993dc859334dbe19f967963a7ae84da8bf4246e,", 150 | "Background.Page": "S:310b011a20203faa1c2f868b877aca411d53984a,", 151 | "Background.Page faded": "S:f1db0cb0eb8a1b7269ef585f393c129b61913e4a,", 152 | "Border.Neutral": "S:7de7c9e53c38437999c9e0737f6f5872bd36cd1d,", 153 | "Border.Neutral faded": "S:0ccb55e8630b8222a0fe71219a82399ff2ec1eff,", 154 | "Border.Primary": "S:104262f775bf6c6bea209bbef647ea4746e2cbc1,", 155 | "Border.Primary faded": "S:624bd5a73e41987ef9369cbbe27a1494189b3fae,", 156 | "Border.Critical": "S:e3586ef2ab3053a084cdd882e542eee244baf61d,", 157 | "Border.Critical faded": "S:76641510d625bb3815c18b0797995e18ca49be3c,", 158 | "Border.Positive": "S:c4e1b23a000b0dbb63a05ed2ddb2e02b363f7ede,", 159 | "Border.Positive faded": "S:c3adef9daa30545d2ab2483cb501f80398188a18,", 160 | "Border.Disabled": "S:a1db88c6eadd5045919c9a56e32250f0307fe661,", 161 | "On background.Neutral": "S:1e5706be0352acafead03b81b64e5af71dc27157,", 162 | "On background.Primary": "S:a3ec85a909583ce6b93c71e069d82889b7bc4092,", 163 | "On background.Critical": "S:bdd3ae279e7ebd071bd32d3e79c2bdd9cbd38783,", 164 | "On background.Positive": "S:90ab381296245778ee7a8dc99c43ec0cea31ffcb,", 165 | "On background.Neutral highlighted": "S:6083a5b3647cbfe87004bb30b9fc454ed786dc8a,", 166 | "On background.Primary highlighted": "S:8c5eccd18844d10cc54a83ea339630737f19dcc5,", 167 | "On background.Critical highlighted": "S:31b4e2c9fc169e89a90671d4a9ba8cfeec584af0,", 168 | "On background.Positive highlighted": "S:7ebe2f78e55fa52b62b0eba044e24fd78d88823b,", 169 | "Persistent.Black": "S:eb9adaa13f521ce02509ad4222706f01bde5f7e3,", 170 | "Persistent.White": "S:5658b9abd68500f2937cf54ba339a472806c0324,", 171 | "Raised": "S:2efd96fe2e5f3c99b823849a8ef56c1a253b0197,", 172 | "Overlay": "S:233809f2c65badd6d44263931b3c452cd9618a04,", 173 | "Raised reverse": "S:3e0d8ba461c6df7b115a73d0d6f6c7aeeeb56c72,", 174 | "Overlay reverse": "S:52d57fa9933d4d2e927c849a7a991a1b726735e5," 175 | } 176 | } 177 | ] -------------------------------------------------------------------------------- /demo/tokens/Dark.json: -------------------------------------------------------------------------------- 1 | { 2 | "Foreground": { 3 | "Neutral": { 4 | "value": "#eff0f1", 5 | "type": "color" 6 | }, 7 | "Neutral faded": { 8 | "value": "#c2c8d6", 9 | "type": "color" 10 | }, 11 | "Primary": { 12 | "value": "#9f9df7", 13 | "type": "color" 14 | }, 15 | "Critical": { 16 | "value": "#eb6666", 17 | "type": "color" 18 | }, 19 | "Positive": { 20 | "value": "#03ab5f", 21 | "type": "color" 22 | }, 23 | "Disabled": { 24 | "value": "#404a63", 25 | "type": "color" 26 | } 27 | }, 28 | "Background": { 29 | "Elevation base": { 30 | "value": "#101319", 31 | "type": "color" 32 | }, 33 | "Elevation raised": { 34 | "value": "#14181f", 35 | "type": "color" 36 | }, 37 | "Elevation overlay": { 38 | "value": "#181c25", 39 | "type": "color" 40 | }, 41 | "Neutral": { 42 | "value": "#30374a", 43 | "type": "color" 44 | }, 45 | "Neutral faded": { 46 | "value": "#222634", 47 | "type": "color" 48 | }, 49 | "Neutral highlighted": { 50 | "value": "#384156", 51 | "type": "color" 52 | }, 53 | "Primary": { 54 | "value": "#5250f2", 55 | "type": "color" 56 | }, 57 | "Primary faded": { 58 | "value": "#24254c", 59 | "type": "color" 60 | }, 61 | "Primary highlighted": { 62 | "value": "#5f5df4", 63 | "type": "color" 64 | }, 65 | "Critical": { 66 | "value": "#ab1717", 67 | "type": "color" 68 | }, 69 | "Critical faded": { 70 | "value": "#2f1e1f", 71 | "type": "color" 72 | }, 73 | "Critical highlighted": { 74 | "value": "#c51616", 75 | "type": "color" 76 | }, 77 | "Positive": { 78 | "value": "#06743f", 79 | "type": "color" 80 | }, 81 | "Positive faded": { 82 | "value": "#0f2921", 83 | "type": "color" 84 | }, 85 | "Positive highlighted": { 86 | "value": "#008545", 87 | "type": "color" 88 | }, 89 | "Disabled": { 90 | "value": "#1c202b", 91 | "type": "color" 92 | }, 93 | "Disabled faded": { 94 | "value": "#161922", 95 | "type": "color" 96 | }, 97 | "Page": { 98 | "value": "#0d1117", 99 | "type": "color" 100 | }, 101 | "Page faded": { 102 | "value": "#0f131a", 103 | "type": "color" 104 | } 105 | }, 106 | "Border": { 107 | "Neutral": { 108 | "value": "#49536f", 109 | "type": "color" 110 | }, 111 | "Neutral faded": { 112 | "value": "#313649", 113 | "type": "color" 114 | }, 115 | "Primary": { 116 | "value": "#7d7bf4", 117 | "type": "color" 118 | }, 119 | "Primary faded": { 120 | "value": "#2e3160", 121 | "type": "color" 122 | }, 123 | "Critical": { 124 | "value": "#e95454", 125 | "type": "color" 126 | }, 127 | "Critical faded": { 128 | "value": "#412a2b", 129 | "type": "color" 130 | }, 131 | "Positive": { 132 | "value": "#03a059", 133 | "type": "color" 134 | }, 135 | "Positive faded": { 136 | "value": "#163c30", 137 | "type": "color" 138 | }, 139 | "Disabled": { 140 | "value": "#242938", 141 | "type": "color" 142 | } 143 | }, 144 | "On background": { 145 | "Neutral": { 146 | "value": "#ffffff", 147 | "type": "color" 148 | }, 149 | "Primary": { 150 | "value": "#ffffff", 151 | "type": "color" 152 | }, 153 | "Critical": { 154 | "value": "#ffffff", 155 | "type": "color" 156 | }, 157 | "Positive": { 158 | "value": "#ffffff", 159 | "type": "color" 160 | }, 161 | "Neutral highlighted": { 162 | "value": "#ffffff", 163 | "type": "color" 164 | }, 165 | "Primary highlighted": { 166 | "value": "#ffffff", 167 | "type": "color" 168 | }, 169 | "Critical highlighted": { 170 | "value": "#ffffff", 171 | "type": "color" 172 | }, 173 | "Positive highlighted": { 174 | "value": "#ffffff", 175 | "type": "color" 176 | } 177 | }, 178 | "Persistent": { 179 | "Black": { 180 | "value": "#000000", 181 | "type": "color" 182 | }, 183 | "White": { 184 | "value": "#ffffff", 185 | "type": "color" 186 | } 187 | }, 188 | "Raised": { 189 | "value": [ 190 | { 191 | "color": "#0000001a", 192 | "type": "dropShadow", 193 | "x": 0, 194 | "y": 4, 195 | "blur": 6, 196 | "spread": -1 197 | }, 198 | { 199 | "color": "#0000001a", 200 | "type": "dropShadow", 201 | "x": 0, 202 | "y": 2, 203 | "blur": 4, 204 | "spread": -2 205 | } 206 | ], 207 | "type": "boxShadow" 208 | }, 209 | "Overlay": { 210 | "value": [ 211 | { 212 | "color": "#0000001a", 213 | "type": "dropShadow", 214 | "x": 0, 215 | "y": 8, 216 | "blur": 10, 217 | "spread": -6 218 | }, 219 | { 220 | "color": "#0000001a", 221 | "type": "dropShadow", 222 | "x": 0, 223 | "y": 20, 224 | "blur": 25, 225 | "spread": -5 226 | } 227 | ], 228 | "type": "boxShadow" 229 | }, 230 | "Raised reverse": { 231 | "value": [ 232 | { 233 | "color": "#0000001a", 234 | "type": "dropShadow", 235 | "x": 0, 236 | "y": -4, 237 | "blur": 6, 238 | "spread": -1 239 | }, 240 | { 241 | "color": "#0000001a", 242 | "type": "dropShadow", 243 | "x": 0, 244 | "y": -2, 245 | "blur": 4, 246 | "spread": -2 247 | } 248 | ], 249 | "type": "boxShadow" 250 | }, 251 | "Overlay reverse": { 252 | "value": [ 253 | { 254 | "color": "#0000001a", 255 | "type": "dropShadow", 256 | "x": 0, 257 | "y": -8, 258 | "blur": 10, 259 | "spread": -6 260 | }, 261 | { 262 | "color": "#0000001a", 263 | "type": "dropShadow", 264 | "x": 0, 265 | "y": -20, 266 | "blur": 25, 267 | "spread": -5 268 | } 269 | ], 270 | "type": "boxShadow" 271 | }, 272 | "fontFamilies": { 273 | "sf-pro": { 274 | "value": "SF Pro", 275 | "type": "fontFamilies" 276 | } 277 | }, 278 | "lineHeights": { 279 | "0": { 280 | "value": "112", 281 | "type": "lineHeights" 282 | }, 283 | "1": { 284 | "value": "92", 285 | "type": "lineHeights" 286 | }, 287 | "2": { 288 | "value": "72", 289 | "type": "lineHeights" 290 | }, 291 | "3": { 292 | "value": "64", 293 | "type": "lineHeights" 294 | }, 295 | "4": { 296 | "value": "56", 297 | "type": "lineHeights" 298 | }, 299 | "5": { 300 | "value": "44", 301 | "type": "lineHeights" 302 | }, 303 | "6": { 304 | "value": "40", 305 | "type": "lineHeights" 306 | }, 307 | "7": { 308 | "value": "32", 309 | "type": "lineHeights" 310 | }, 311 | "8": { 312 | "value": "28", 313 | "type": "lineHeights" 314 | }, 315 | "9": { 316 | "value": "24", 317 | "type": "lineHeights" 318 | }, 319 | "10": { 320 | "value": "20", 321 | "type": "lineHeights" 322 | }, 323 | "11": { 324 | "value": "16", 325 | "type": "lineHeights" 326 | }, 327 | "12": { 328 | "value": "12", 329 | "type": "lineHeights" 330 | } 331 | }, 332 | "fontWeights": { 333 | "sf-pro-0": { 334 | "value": "Heavy", 335 | "type": "fontWeights" 336 | }, 337 | "sf-pro-1": { 338 | "value": "Bold", 339 | "type": "fontWeights" 340 | }, 341 | "sf-pro-2": { 342 | "value": "Regular", 343 | "type": "fontWeights" 344 | }, 345 | "sf-pro-3": { 346 | "value": "Medium", 347 | "type": "fontWeights" 348 | } 349 | }, 350 | "fontSize": { 351 | "0": { 352 | "value": "10", 353 | "type": "fontSizes" 354 | }, 355 | "1": { 356 | "value": "12", 357 | "type": "fontSizes" 358 | }, 359 | "2": { 360 | "value": "14", 361 | "type": "fontSizes" 362 | }, 363 | "3": { 364 | "value": "16", 365 | "type": "fontSizes" 366 | }, 367 | "4": { 368 | "value": "18", 369 | "type": "fontSizes" 370 | }, 371 | "5": { 372 | "value": "20", 373 | "type": "fontSizes" 374 | }, 375 | "6": { 376 | "value": "24", 377 | "type": "fontSizes" 378 | }, 379 | "7": { 380 | "value": "32", 381 | "type": "fontSizes" 382 | }, 383 | "8": { 384 | "value": "36", 385 | "type": "fontSizes" 386 | }, 387 | "9": { 388 | "value": "48", 389 | "type": "fontSizes" 390 | }, 391 | "10": { 392 | "value": "56", 393 | "type": "fontSizes" 394 | }, 395 | "11": { 396 | "value": "64", 397 | "type": "fontSizes" 398 | }, 399 | "12": { 400 | "value": "80", 401 | "type": "fontSizes" 402 | }, 403 | "13": { 404 | "value": "96", 405 | "type": "fontSizes" 406 | } 407 | }, 408 | "letterSpacing": { 409 | "0": { 410 | "value": "0%", 411 | "type": "letterSpacing" 412 | } 413 | }, 414 | "paragraphSpacing": { 415 | "0": { 416 | "value": "0", 417 | "type": "paragraphSpacing" 418 | } 419 | }, 420 | "Display large": { 421 | "value": { 422 | "fontFamily": "{fontFamilies.sf-pro}", 423 | "fontWeight": "{fontWeights.sf-pro-0}", 424 | "lineHeight": "{lineHeights.0}", 425 | "fontSize": "{fontSize.13}", 426 | "letterSpacing": "{letterSpacing.0}", 427 | "paragraphSpacing": "{paragraphSpacing.0}", 428 | "paragraphIndent": "{paragraphIndent.0}", 429 | "textCase": "{textCase.none}", 430 | "textDecoration": "{textDecoration.none}" 431 | }, 432 | "type": "typography" 433 | }, 434 | "Display medium": { 435 | "value": { 436 | "fontFamily": "{fontFamilies.sf-pro}", 437 | "fontWeight": "{fontWeights.sf-pro-0}", 438 | "lineHeight": "{lineHeights.1}", 439 | "fontSize": "{fontSize.12}", 440 | "letterSpacing": "{letterSpacing.0}", 441 | "paragraphSpacing": "{paragraphSpacing.0}", 442 | "paragraphIndent": "{paragraphIndent.0}", 443 | "textCase": "{textCase.none}", 444 | "textDecoration": "{textDecoration.none}" 445 | }, 446 | "type": "typography" 447 | }, 448 | "Display small": { 449 | "value": { 450 | "fontFamily": "{fontFamilies.sf-pro}", 451 | "fontWeight": "{fontWeights.sf-pro-0}", 452 | "lineHeight": "{lineHeights.2}", 453 | "fontSize": "{fontSize.11}", 454 | "letterSpacing": "{letterSpacing.0}", 455 | "paragraphSpacing": "{paragraphSpacing.0}", 456 | "paragraphIndent": "{paragraphIndent.0}", 457 | "textCase": "{textCase.none}", 458 | "textDecoration": "{textDecoration.none}" 459 | }, 460 | "type": "typography" 461 | }, 462 | "Title large": { 463 | "value": { 464 | "fontFamily": "{fontFamilies.sf-pro}", 465 | "fontWeight": "{fontWeights.sf-pro-1}", 466 | "lineHeight": "{lineHeights.3}", 467 | "fontSize": "{fontSize.10}", 468 | "letterSpacing": "{letterSpacing.0}", 469 | "paragraphSpacing": "{paragraphSpacing.0}", 470 | "paragraphIndent": "{paragraphIndent.0}", 471 | "textCase": "{textCase.none}", 472 | "textDecoration": "{textDecoration.none}" 473 | }, 474 | "type": "typography" 475 | }, 476 | "Title medium": { 477 | "value": { 478 | "fontFamily": "{fontFamilies.sf-pro}", 479 | "fontWeight": "{fontWeights.sf-pro-1}", 480 | "lineHeight": "{lineHeights.4}", 481 | "fontSize": "{fontSize.9}", 482 | "letterSpacing": "{letterSpacing.0}", 483 | "paragraphSpacing": "{paragraphSpacing.0}", 484 | "paragraphIndent": "{paragraphIndent.0}", 485 | "textCase": "{textCase.none}", 486 | "textDecoration": "{textDecoration.none}" 487 | }, 488 | "type": "typography" 489 | }, 490 | "Title small": { 491 | "value": { 492 | "fontFamily": "{fontFamilies.sf-pro}", 493 | "fontWeight": "{fontWeights.sf-pro-1}", 494 | "lineHeight": "{lineHeights.5}", 495 | "fontSize": "{fontSize.8}", 496 | "letterSpacing": "{letterSpacing.0}", 497 | "paragraphSpacing": "{paragraphSpacing.0}", 498 | "paragraphIndent": "{paragraphIndent.0}", 499 | "textCase": "{textCase.none}", 500 | "textDecoration": "{textDecoration.none}" 501 | }, 502 | "type": "typography" 503 | }, 504 | "Featured large": { 505 | "Regular": { 506 | "value": { 507 | "fontFamily": "{fontFamilies.sf-pro}", 508 | "fontWeight": "{fontWeights.sf-pro-2}", 509 | "lineHeight": "{lineHeights.6}", 510 | "fontSize": "{fontSize.7}", 511 | "letterSpacing": "{letterSpacing.0}", 512 | "paragraphSpacing": "{paragraphSpacing.0}", 513 | "paragraphIndent": "{paragraphIndent.0}", 514 | "textCase": "{textCase.none}", 515 | "textDecoration": "{textDecoration.none}" 516 | }, 517 | "type": "typography" 518 | }, 519 | "Medium": { 520 | "value": { 521 | "fontFamily": "{fontFamilies.sf-pro}", 522 | "fontWeight": "{fontWeights.sf-pro-3}", 523 | "lineHeight": "{lineHeights.6}", 524 | "fontSize": "{fontSize.7}", 525 | "letterSpacing": "{letterSpacing.0}", 526 | "paragraphSpacing": "{paragraphSpacing.0}", 527 | "paragraphIndent": "{paragraphIndent.0}", 528 | "textCase": "{textCase.none}", 529 | "textDecoration": "{textDecoration.none}" 530 | }, 531 | "type": "typography" 532 | }, 533 | "Bold": { 534 | "value": { 535 | "fontFamily": "{fontFamilies.sf-pro}", 536 | "fontWeight": "{fontWeights.sf-pro-1}", 537 | "lineHeight": "{lineHeights.6}", 538 | "fontSize": "{fontSize.7}", 539 | "letterSpacing": "{letterSpacing.0}", 540 | "paragraphSpacing": "{paragraphSpacing.0}", 541 | "paragraphIndent": "{paragraphIndent.0}", 542 | "textCase": "{textCase.none}", 543 | "textDecoration": "{textDecoration.none}" 544 | }, 545 | "type": "typography" 546 | } 547 | }, 548 | "Featured medium": { 549 | "Regular": { 550 | "value": { 551 | "fontFamily": "{fontFamilies.sf-pro}", 552 | "fontWeight": "{fontWeights.sf-pro-2}", 553 | "lineHeight": "{lineHeights.7}", 554 | "fontSize": "{fontSize.6}", 555 | "letterSpacing": "{letterSpacing.0}", 556 | "paragraphSpacing": "{paragraphSpacing.0}", 557 | "paragraphIndent": "{paragraphIndent.0}", 558 | "textCase": "{textCase.none}", 559 | "textDecoration": "{textDecoration.none}" 560 | }, 561 | "type": "typography" 562 | }, 563 | "Medium": { 564 | "value": { 565 | "fontFamily": "{fontFamilies.sf-pro}", 566 | "fontWeight": "{fontWeights.sf-pro-3}", 567 | "lineHeight": "{lineHeights.7}", 568 | "fontSize": "{fontSize.6}", 569 | "letterSpacing": "{letterSpacing.0}", 570 | "paragraphSpacing": "{paragraphSpacing.0}", 571 | "paragraphIndent": "{paragraphIndent.0}", 572 | "textCase": "{textCase.none}", 573 | "textDecoration": "{textDecoration.none}" 574 | }, 575 | "type": "typography" 576 | }, 577 | "Bold": { 578 | "value": { 579 | "fontFamily": "{fontFamilies.sf-pro}", 580 | "fontWeight": "{fontWeights.sf-pro-1}", 581 | "lineHeight": "{lineHeights.7}", 582 | "fontSize": "{fontSize.6}", 583 | "letterSpacing": "{letterSpacing.0}", 584 | "paragraphSpacing": "{paragraphSpacing.0}", 585 | "paragraphIndent": "{paragraphIndent.0}", 586 | "textCase": "{textCase.none}", 587 | "textDecoration": "{textDecoration.none}" 588 | }, 589 | "type": "typography" 590 | } 591 | }, 592 | "Featured small": { 593 | "Regular": { 594 | "value": { 595 | "fontFamily": "{fontFamilies.sf-pro}", 596 | "fontWeight": "{fontWeights.sf-pro-2}", 597 | "lineHeight": "{lineHeights.8}", 598 | "fontSize": "{fontSize.5}", 599 | "letterSpacing": "{letterSpacing.0}", 600 | "paragraphSpacing": "{paragraphSpacing.0}", 601 | "paragraphIndent": "{paragraphIndent.0}", 602 | "textCase": "{textCase.none}", 603 | "textDecoration": "{textDecoration.none}" 604 | }, 605 | "type": "typography" 606 | }, 607 | "Medium": { 608 | "value": { 609 | "fontFamily": "{fontFamilies.sf-pro}", 610 | "fontWeight": "{fontWeights.sf-pro-3}", 611 | "lineHeight": "{lineHeights.8}", 612 | "fontSize": "{fontSize.5}", 613 | "letterSpacing": "{letterSpacing.0}", 614 | "paragraphSpacing": "{paragraphSpacing.0}", 615 | "paragraphIndent": "{paragraphIndent.0}", 616 | "textCase": "{textCase.none}", 617 | "textDecoration": "{textDecoration.none}" 618 | }, 619 | "type": "typography" 620 | }, 621 | "Bold": { 622 | "value": { 623 | "fontFamily": "{fontFamilies.sf-pro}", 624 | "fontWeight": "{fontWeights.sf-pro-1}", 625 | "lineHeight": "{lineHeights.8}", 626 | "fontSize": "{fontSize.5}", 627 | "letterSpacing": "{letterSpacing.0}", 628 | "paragraphSpacing": "{paragraphSpacing.0}", 629 | "paragraphIndent": "{paragraphIndent.0}", 630 | "textCase": "{textCase.none}", 631 | "textDecoration": "{textDecoration.none}" 632 | }, 633 | "type": "typography" 634 | } 635 | }, 636 | "Body large": { 637 | "Regular": { 638 | "value": { 639 | "fontFamily": "{fontFamilies.sf-pro}", 640 | "fontWeight": "{fontWeights.sf-pro-2}", 641 | "lineHeight": "{lineHeights.8}", 642 | "fontSize": "{fontSize.4}", 643 | "letterSpacing": "{letterSpacing.0}", 644 | "paragraphSpacing": "{paragraphSpacing.0}", 645 | "paragraphIndent": "{paragraphIndent.0}", 646 | "textCase": "{textCase.none}", 647 | "textDecoration": "{textDecoration.none}" 648 | }, 649 | "type": "typography" 650 | }, 651 | "Medium": { 652 | "value": { 653 | "fontFamily": "{fontFamilies.sf-pro}", 654 | "fontWeight": "{fontWeights.sf-pro-3}", 655 | "lineHeight": "{lineHeights.8}", 656 | "fontSize": "{fontSize.4}", 657 | "letterSpacing": "{letterSpacing.0}", 658 | "paragraphSpacing": "{paragraphSpacing.0}", 659 | "paragraphIndent": "{paragraphIndent.0}", 660 | "textCase": "{textCase.none}", 661 | "textDecoration": "{textDecoration.none}" 662 | }, 663 | "type": "typography" 664 | }, 665 | "Bold": { 666 | "value": { 667 | "fontFamily": "{fontFamilies.sf-pro}", 668 | "fontWeight": "{fontWeights.sf-pro-1}", 669 | "lineHeight": "{lineHeights.8}", 670 | "fontSize": "{fontSize.4}", 671 | "letterSpacing": "{letterSpacing.0}", 672 | "paragraphSpacing": "{paragraphSpacing.0}", 673 | "paragraphIndent": "{paragraphIndent.0}", 674 | "textCase": "{textCase.none}", 675 | "textDecoration": "{textDecoration.none}" 676 | }, 677 | "type": "typography" 678 | } 679 | }, 680 | "Body medium": { 681 | "Regular": { 682 | "value": { 683 | "fontFamily": "{fontFamilies.sf-pro}", 684 | "fontWeight": "{fontWeights.sf-pro-2}", 685 | "lineHeight": "{lineHeights.9}", 686 | "fontSize": "{fontSize.3}", 687 | "letterSpacing": "{letterSpacing.0}", 688 | "paragraphSpacing": "{paragraphSpacing.0}", 689 | "paragraphIndent": "{paragraphIndent.0}", 690 | "textCase": "{textCase.none}", 691 | "textDecoration": "{textDecoration.none}" 692 | }, 693 | "type": "typography" 694 | }, 695 | "Medium": { 696 | "value": { 697 | "fontFamily": "{fontFamilies.sf-pro}", 698 | "fontWeight": "{fontWeights.sf-pro-3}", 699 | "lineHeight": "{lineHeights.9}", 700 | "fontSize": "{fontSize.3}", 701 | "letterSpacing": "{letterSpacing.0}", 702 | "paragraphSpacing": "{paragraphSpacing.0}", 703 | "paragraphIndent": "{paragraphIndent.0}", 704 | "textCase": "{textCase.none}", 705 | "textDecoration": "{textDecoration.none}" 706 | }, 707 | "type": "typography" 708 | }, 709 | "Bold": { 710 | "value": { 711 | "fontFamily": "{fontFamilies.sf-pro}", 712 | "fontWeight": "{fontWeights.sf-pro-1}", 713 | "lineHeight": "{lineHeights.9}", 714 | "fontSize": "{fontSize.3}", 715 | "letterSpacing": "{letterSpacing.0}", 716 | "paragraphSpacing": "{paragraphSpacing.0}", 717 | "paragraphIndent": "{paragraphIndent.0}", 718 | "textCase": "{textCase.none}", 719 | "textDecoration": "{textDecoration.none}" 720 | }, 721 | "type": "typography" 722 | } 723 | }, 724 | "Body small": { 725 | "Regular": { 726 | "value": { 727 | "fontFamily": "{fontFamilies.sf-pro}", 728 | "fontWeight": "{fontWeights.sf-pro-2}", 729 | "lineHeight": "{lineHeights.10}", 730 | "fontSize": "{fontSize.2}", 731 | "letterSpacing": "{letterSpacing.0}", 732 | "paragraphSpacing": "{paragraphSpacing.0}", 733 | "paragraphIndent": "{paragraphIndent.0}", 734 | "textCase": "{textCase.none}", 735 | "textDecoration": "{textDecoration.none}" 736 | }, 737 | "type": "typography" 738 | }, 739 | "Medium": { 740 | "value": { 741 | "fontFamily": "{fontFamilies.sf-pro}", 742 | "fontWeight": "{fontWeights.sf-pro-3}", 743 | "lineHeight": "{lineHeights.10}", 744 | "fontSize": "{fontSize.2}", 745 | "letterSpacing": "{letterSpacing.0}", 746 | "paragraphSpacing": "{paragraphSpacing.0}", 747 | "paragraphIndent": "{paragraphIndent.0}", 748 | "textCase": "{textCase.none}", 749 | "textDecoration": "{textDecoration.none}" 750 | }, 751 | "type": "typography" 752 | }, 753 | "Bold": { 754 | "value": { 755 | "fontFamily": "{fontFamilies.sf-pro}", 756 | "fontWeight": "{fontWeights.sf-pro-1}", 757 | "lineHeight": "{lineHeights.10}", 758 | "fontSize": "{fontSize.2}", 759 | "letterSpacing": "{letterSpacing.0}", 760 | "paragraphSpacing": "{paragraphSpacing.0}", 761 | "paragraphIndent": "{paragraphIndent.0}", 762 | "textCase": "{textCase.none}", 763 | "textDecoration": "{textDecoration.none}" 764 | }, 765 | "type": "typography" 766 | } 767 | }, 768 | "Caption large": { 769 | "Regular": { 770 | "value": { 771 | "fontFamily": "{fontFamilies.sf-pro}", 772 | "fontWeight": "{fontWeights.sf-pro-2}", 773 | "lineHeight": "{lineHeights.11}", 774 | "fontSize": "{fontSize.1}", 775 | "letterSpacing": "{letterSpacing.0}", 776 | "paragraphSpacing": "{paragraphSpacing.0}", 777 | "paragraphIndent": "{paragraphIndent.0}", 778 | "textCase": "{textCase.none}", 779 | "textDecoration": "{textDecoration.none}" 780 | }, 781 | "type": "typography" 782 | }, 783 | "Medium": { 784 | "value": { 785 | "fontFamily": "{fontFamilies.sf-pro}", 786 | "fontWeight": "{fontWeights.sf-pro-3}", 787 | "lineHeight": "{lineHeights.11}", 788 | "fontSize": "{fontSize.1}", 789 | "letterSpacing": "{letterSpacing.0}", 790 | "paragraphSpacing": "{paragraphSpacing.0}", 791 | "paragraphIndent": "{paragraphIndent.0}", 792 | "textCase": "{textCase.none}", 793 | "textDecoration": "{textDecoration.none}" 794 | }, 795 | "type": "typography" 796 | }, 797 | "Bold": { 798 | "value": { 799 | "fontFamily": "{fontFamilies.sf-pro}", 800 | "fontWeight": "{fontWeights.sf-pro-1}", 801 | "lineHeight": "{lineHeights.11}", 802 | "fontSize": "{fontSize.1}", 803 | "letterSpacing": "{letterSpacing.0}", 804 | "paragraphSpacing": "{paragraphSpacing.0}", 805 | "paragraphIndent": "{paragraphIndent.0}", 806 | "textCase": "{textCase.none}", 807 | "textDecoration": "{textDecoration.none}" 808 | }, 809 | "type": "typography" 810 | } 811 | }, 812 | "Caption medium": { 813 | "Regular": { 814 | "value": { 815 | "fontFamily": "{fontFamilies.sf-pro}", 816 | "fontWeight": "{fontWeights.sf-pro-2}", 817 | "lineHeight": "{lineHeights.12}", 818 | "fontSize": "{fontSize.0}", 819 | "letterSpacing": "{letterSpacing.0}", 820 | "paragraphSpacing": "{paragraphSpacing.0}", 821 | "paragraphIndent": "{paragraphIndent.0}", 822 | "textCase": "{textCase.none}", 823 | "textDecoration": "{textDecoration.none}" 824 | }, 825 | "type": "typography" 826 | }, 827 | "Medium": { 828 | "value": { 829 | "fontFamily": "{fontFamilies.sf-pro}", 830 | "fontWeight": "{fontWeights.sf-pro-3}", 831 | "lineHeight": "{lineHeights.12}", 832 | "fontSize": "{fontSize.0}", 833 | "letterSpacing": "{letterSpacing.0}", 834 | "paragraphSpacing": "{paragraphSpacing.0}", 835 | "paragraphIndent": "{paragraphIndent.0}", 836 | "textCase": "{textCase.none}", 837 | "textDecoration": "{textDecoration.none}" 838 | }, 839 | "type": "typography" 840 | }, 841 | "Bold": { 842 | "value": { 843 | "fontFamily": "{fontFamilies.sf-pro}", 844 | "fontWeight": "{fontWeights.sf-pro-1}", 845 | "lineHeight": "{lineHeights.12}", 846 | "fontSize": "{fontSize.0}", 847 | "letterSpacing": "{letterSpacing.0}", 848 | "paragraphSpacing": "{paragraphSpacing.0}", 849 | "paragraphIndent": "{paragraphIndent.0}", 850 | "textCase": "{textCase.none}", 851 | "textDecoration": "{textDecoration.none}" 852 | }, 853 | "type": "typography" 854 | } 855 | }, 856 | "textCase": { 857 | "none": { 858 | "value": "none", 859 | "type": "textCase" 860 | } 861 | }, 862 | "textDecoration": { 863 | "none": { 864 | "value": "none", 865 | "type": "textDecoration" 866 | } 867 | }, 868 | "paragraphIndent": { 869 | "0": { 870 | "value": "0px", 871 | "type": "dimension" 872 | } 873 | } 874 | } -------------------------------------------------------------------------------- /demo/tokens/Light.json: -------------------------------------------------------------------------------- 1 | { 2 | "Foreground": { 3 | "Neutral": { 4 | "value": "#14171f", 5 | "type": "color" 6 | }, 7 | "Neutral faded": { 8 | "value": "#4d5874", 9 | "type": "color" 10 | }, 11 | "Primary": { 12 | "value": "#4d4be7", 13 | "type": "color" 14 | }, 15 | "Critical": { 16 | "value": "#cb101d", 17 | "type": "color" 18 | }, 19 | "Positive": { 20 | "value": "#05751f", 21 | "type": "color" 22 | }, 23 | "Disabled": { 24 | "value": "#c7cddb", 25 | "type": "color" 26 | } 27 | }, 28 | "Background": { 29 | "Elevation base": { 30 | "value": "#ffffff", 31 | "type": "color" 32 | }, 33 | "Elevation raised": { 34 | "value": "#ffffff", 35 | "type": "color" 36 | }, 37 | "Elevation overlay": { 38 | "value": "#ffffff", 39 | "type": "color" 40 | }, 41 | "Neutral": { 42 | "value": "#dfe2ea", 43 | "type": "color" 44 | }, 45 | "Neutral faded": { 46 | "value": "#f3f4f6", 47 | "type": "color" 48 | }, 49 | "Neutral highlighted": { 50 | "value": "#c7cddb", 51 | "type": "color" 52 | }, 53 | "Primary": { 54 | "value": "#5a58f2", 55 | "type": "color" 56 | }, 57 | "Primary faded": { 58 | "value": "#edecfd", 59 | "type": "color" 60 | }, 61 | "Primary highlighted": { 62 | "value": "#7371f4", 63 | "type": "color" 64 | }, 65 | "Critical": { 66 | "value": "#e22c2c", 67 | "type": "color" 68 | }, 69 | "Critical faded": { 70 | "value": "#fef1f2", 71 | "type": "color" 72 | }, 73 | "Critical highlighted": { 74 | "value": "#eb4747", 75 | "type": "color" 76 | }, 77 | "Positive": { 78 | "value": "#118850", 79 | "type": "color" 80 | }, 81 | "Positive faded": { 82 | "value": "#ebfef6", 83 | "type": "color" 84 | }, 85 | "Positive highlighted": { 86 | "value": "#00a355", 87 | "type": "color" 88 | }, 89 | "Disabled": { 90 | "value": "#eceef3", 91 | "type": "color" 92 | }, 93 | "Disabled faded": { 94 | "value": "#f4f5f7", 95 | "type": "color" 96 | }, 97 | "Page": { 98 | "value": "#ffffff", 99 | "type": "color" 100 | }, 101 | "Page faded": { 102 | "value": "#fafafa", 103 | "type": "color" 104 | } 105 | }, 106 | "Border": { 107 | "Neutral": { 108 | "value": "#bbc1d3", 109 | "type": "color" 110 | }, 111 | "Neutral faded": { 112 | "value": "#dfe2ea", 113 | "type": "color" 114 | }, 115 | "Primary": { 116 | "value": "#4d4be7", 117 | "type": "color" 118 | }, 119 | "Primary faded": { 120 | "value": "#d7d5fb", 121 | "type": "color" 122 | }, 123 | "Critical": { 124 | "value": "#cb101d", 125 | "type": "color" 126 | }, 127 | "Critical faded": { 128 | "value": "#fbd5d8", 129 | "type": "color" 130 | }, 131 | "Positive": { 132 | "value": "#05751f", 133 | "type": "color" 134 | }, 135 | "Positive faded": { 136 | "value": "#cdedd5", 137 | "type": "color" 138 | }, 139 | "Disabled": { 140 | "value": "#dfe2ea", 141 | "type": "color" 142 | } 143 | }, 144 | "On background": { 145 | "Neutral": { 146 | "value": "#000000", 147 | "type": "color" 148 | }, 149 | "Primary": { 150 | "value": "#ffffff", 151 | "type": "color" 152 | }, 153 | "Critical": { 154 | "value": "#ffffff", 155 | "type": "color" 156 | }, 157 | "Positive": { 158 | "value": "#ffffff", 159 | "type": "color" 160 | }, 161 | "Neutral highlighted": { 162 | "value": "#000000", 163 | "type": "color" 164 | }, 165 | "Primary highlighted": { 166 | "value": "#ffffff", 167 | "type": "color" 168 | }, 169 | "Critical highlighted": { 170 | "value": "#ffffff", 171 | "type": "color" 172 | }, 173 | "Positive highlighted": { 174 | "value": "#ffffff", 175 | "type": "color" 176 | } 177 | }, 178 | "Persistent": { 179 | "Black": { 180 | "value": "#000000", 181 | "type": "color" 182 | }, 183 | "White": { 184 | "value": "#ffffff", 185 | "type": "color" 186 | } 187 | }, 188 | "Raised": { 189 | "value": [ 190 | { 191 | "color": "#0000001a", 192 | "type": "dropShadow", 193 | "x": 0, 194 | "y": 2, 195 | "blur": 4, 196 | "spread": -2 197 | }, 198 | { 199 | "color": "#0000001a", 200 | "type": "dropShadow", 201 | "x": 0, 202 | "y": 4, 203 | "blur": 6, 204 | "spread": -1 205 | } 206 | ], 207 | "type": "boxShadow" 208 | }, 209 | "Overlay": { 210 | "value": [ 211 | { 212 | "color": "#0000001a", 213 | "type": "dropShadow", 214 | "x": 0, 215 | "y": 20, 216 | "blur": 25, 217 | "spread": -5 218 | }, 219 | { 220 | "color": "#0000001a", 221 | "type": "dropShadow", 222 | "x": 0, 223 | "y": 8, 224 | "blur": 10, 225 | "spread": -6 226 | } 227 | ], 228 | "type": "boxShadow" 229 | }, 230 | "Raised reverse": { 231 | "value": [ 232 | { 233 | "color": "#0000001a", 234 | "type": "dropShadow", 235 | "x": 0, 236 | "y": -2, 237 | "blur": 4, 238 | "spread": -2 239 | }, 240 | { 241 | "color": "#0000001a", 242 | "type": "dropShadow", 243 | "x": 0, 244 | "y": -4, 245 | "blur": 6, 246 | "spread": -1 247 | } 248 | ], 249 | "type": "boxShadow" 250 | }, 251 | "Overlay reverse": { 252 | "value": [ 253 | { 254 | "color": "#0000001a", 255 | "type": "dropShadow", 256 | "x": 0, 257 | "y": -20, 258 | "blur": 25, 259 | "spread": -5 260 | }, 261 | { 262 | "color": "#0000001a", 263 | "type": "dropShadow", 264 | "x": 0, 265 | "y": -8, 266 | "blur": 10, 267 | "spread": -6 268 | } 269 | ], 270 | "type": "boxShadow" 271 | }, 272 | "fontFamilies": { 273 | "sf-pro": { 274 | "value": "SF Pro", 275 | "type": "fontFamilies" 276 | } 277 | }, 278 | "lineHeights": { 279 | "0": { 280 | "value": "112", 281 | "type": "lineHeights" 282 | }, 283 | "1": { 284 | "value": "92", 285 | "type": "lineHeights" 286 | }, 287 | "2": { 288 | "value": "72", 289 | "type": "lineHeights" 290 | }, 291 | "3": { 292 | "value": "64", 293 | "type": "lineHeights" 294 | }, 295 | "4": { 296 | "value": "56", 297 | "type": "lineHeights" 298 | }, 299 | "5": { 300 | "value": "44", 301 | "type": "lineHeights" 302 | }, 303 | "6": { 304 | "value": "40", 305 | "type": "lineHeights" 306 | }, 307 | "7": { 308 | "value": "32", 309 | "type": "lineHeights" 310 | }, 311 | "8": { 312 | "value": "28", 313 | "type": "lineHeights" 314 | }, 315 | "9": { 316 | "value": "24", 317 | "type": "lineHeights" 318 | }, 319 | "10": { 320 | "value": "20", 321 | "type": "lineHeights" 322 | }, 323 | "11": { 324 | "value": "16", 325 | "type": "lineHeights" 326 | }, 327 | "12": { 328 | "value": "12", 329 | "type": "lineHeights" 330 | } 331 | }, 332 | "fontWeights": { 333 | "sf-pro-0": { 334 | "value": "Heavy", 335 | "type": "fontWeights" 336 | }, 337 | "sf-pro-1": { 338 | "value": "Bold", 339 | "type": "fontWeights" 340 | }, 341 | "sf-pro-2": { 342 | "value": "Regular", 343 | "type": "fontWeights" 344 | }, 345 | "sf-pro-3": { 346 | "value": "Medium", 347 | "type": "fontWeights" 348 | } 349 | }, 350 | "fontSize": { 351 | "0": { 352 | "value": "10", 353 | "type": "fontSizes" 354 | }, 355 | "1": { 356 | "value": "12", 357 | "type": "fontSizes" 358 | }, 359 | "2": { 360 | "value": "14", 361 | "type": "fontSizes" 362 | }, 363 | "3": { 364 | "value": "16", 365 | "type": "fontSizes" 366 | }, 367 | "4": { 368 | "value": "18", 369 | "type": "fontSizes" 370 | }, 371 | "5": { 372 | "value": "20", 373 | "type": "fontSizes" 374 | }, 375 | "6": { 376 | "value": "24", 377 | "type": "fontSizes" 378 | }, 379 | "7": { 380 | "value": "32", 381 | "type": "fontSizes" 382 | }, 383 | "8": { 384 | "value": "36", 385 | "type": "fontSizes" 386 | }, 387 | "9": { 388 | "value": "48", 389 | "type": "fontSizes" 390 | }, 391 | "10": { 392 | "value": "56", 393 | "type": "fontSizes" 394 | }, 395 | "11": { 396 | "value": "64", 397 | "type": "fontSizes" 398 | }, 399 | "12": { 400 | "value": "80", 401 | "type": "fontSizes" 402 | }, 403 | "13": { 404 | "value": "96", 405 | "type": "fontSizes" 406 | } 407 | }, 408 | "letterSpacing": { 409 | "0": { 410 | "value": "0%", 411 | "type": "letterSpacing" 412 | } 413 | }, 414 | "paragraphSpacing": { 415 | "0": { 416 | "value": "0", 417 | "type": "paragraphSpacing" 418 | } 419 | }, 420 | "Display large": { 421 | "value": { 422 | "fontFamily": "{fontFamilies.sf-pro}", 423 | "fontWeight": "{fontWeights.sf-pro-0}", 424 | "lineHeight": "{lineHeights.0}", 425 | "fontSize": "{fontSize.13}", 426 | "letterSpacing": "{letterSpacing.0}", 427 | "paragraphSpacing": "{paragraphSpacing.0}", 428 | "paragraphIndent": "{paragraphIndent.0}", 429 | "textCase": "{textCase.none}", 430 | "textDecoration": "{textDecoration.none}" 431 | }, 432 | "type": "typography" 433 | }, 434 | "Display medium": { 435 | "value": { 436 | "fontFamily": "{fontFamilies.sf-pro}", 437 | "fontWeight": "{fontWeights.sf-pro-0}", 438 | "lineHeight": "{lineHeights.1}", 439 | "fontSize": "{fontSize.12}", 440 | "letterSpacing": "{letterSpacing.0}", 441 | "paragraphSpacing": "{paragraphSpacing.0}", 442 | "paragraphIndent": "{paragraphIndent.0}", 443 | "textCase": "{textCase.none}", 444 | "textDecoration": "{textDecoration.none}" 445 | }, 446 | "type": "typography" 447 | }, 448 | "Display small": { 449 | "value": { 450 | "fontFamily": "{fontFamilies.sf-pro}", 451 | "fontWeight": "{fontWeights.sf-pro-0}", 452 | "lineHeight": "{lineHeights.2}", 453 | "fontSize": "{fontSize.11}", 454 | "letterSpacing": "{letterSpacing.0}", 455 | "paragraphSpacing": "{paragraphSpacing.0}", 456 | "paragraphIndent": "{paragraphIndent.0}", 457 | "textCase": "{textCase.none}", 458 | "textDecoration": "{textDecoration.none}" 459 | }, 460 | "type": "typography" 461 | }, 462 | "Title large": { 463 | "value": { 464 | "fontFamily": "{fontFamilies.sf-pro}", 465 | "fontWeight": "{fontWeights.sf-pro-1}", 466 | "lineHeight": "{lineHeights.3}", 467 | "fontSize": "{fontSize.10}", 468 | "letterSpacing": "{letterSpacing.0}", 469 | "paragraphSpacing": "{paragraphSpacing.0}", 470 | "paragraphIndent": "{paragraphIndent.0}", 471 | "textCase": "{textCase.none}", 472 | "textDecoration": "{textDecoration.none}" 473 | }, 474 | "type": "typography" 475 | }, 476 | "Title medium": { 477 | "value": { 478 | "fontFamily": "{fontFamilies.sf-pro}", 479 | "fontWeight": "{fontWeights.sf-pro-1}", 480 | "lineHeight": "{lineHeights.4}", 481 | "fontSize": "{fontSize.9}", 482 | "letterSpacing": "{letterSpacing.0}", 483 | "paragraphSpacing": "{paragraphSpacing.0}", 484 | "paragraphIndent": "{paragraphIndent.0}", 485 | "textCase": "{textCase.none}", 486 | "textDecoration": "{textDecoration.none}" 487 | }, 488 | "type": "typography" 489 | }, 490 | "Title small": { 491 | "value": { 492 | "fontFamily": "{fontFamilies.sf-pro}", 493 | "fontWeight": "{fontWeights.sf-pro-1}", 494 | "lineHeight": "{lineHeights.5}", 495 | "fontSize": "{fontSize.8}", 496 | "letterSpacing": "{letterSpacing.0}", 497 | "paragraphSpacing": "{paragraphSpacing.0}", 498 | "paragraphIndent": "{paragraphIndent.0}", 499 | "textCase": "{textCase.none}", 500 | "textDecoration": "{textDecoration.none}" 501 | }, 502 | "type": "typography" 503 | }, 504 | "Featured large": { 505 | "Regular": { 506 | "value": { 507 | "fontFamily": "{fontFamilies.sf-pro}", 508 | "fontWeight": "{fontWeights.sf-pro-2}", 509 | "lineHeight": "{lineHeights.6}", 510 | "fontSize": "{fontSize.7}", 511 | "letterSpacing": "{letterSpacing.0}", 512 | "paragraphSpacing": "{paragraphSpacing.0}", 513 | "paragraphIndent": "{paragraphIndent.0}", 514 | "textCase": "{textCase.none}", 515 | "textDecoration": "{textDecoration.none}" 516 | }, 517 | "type": "typography" 518 | }, 519 | "Medium": { 520 | "value": { 521 | "fontFamily": "{fontFamilies.sf-pro}", 522 | "fontWeight": "{fontWeights.sf-pro-3}", 523 | "lineHeight": "{lineHeights.6}", 524 | "fontSize": "{fontSize.7}", 525 | "letterSpacing": "{letterSpacing.0}", 526 | "paragraphSpacing": "{paragraphSpacing.0}", 527 | "paragraphIndent": "{paragraphIndent.0}", 528 | "textCase": "{textCase.none}", 529 | "textDecoration": "{textDecoration.none}" 530 | }, 531 | "type": "typography" 532 | }, 533 | "Bold": { 534 | "value": { 535 | "fontFamily": "{fontFamilies.sf-pro}", 536 | "fontWeight": "{fontWeights.sf-pro-1}", 537 | "lineHeight": "{lineHeights.6}", 538 | "fontSize": "{fontSize.7}", 539 | "letterSpacing": "{letterSpacing.0}", 540 | "paragraphSpacing": "{paragraphSpacing.0}", 541 | "paragraphIndent": "{paragraphIndent.0}", 542 | "textCase": "{textCase.none}", 543 | "textDecoration": "{textDecoration.none}" 544 | }, 545 | "type": "typography" 546 | } 547 | }, 548 | "Featured medium": { 549 | "Regular": { 550 | "value": { 551 | "fontFamily": "{fontFamilies.sf-pro}", 552 | "fontWeight": "{fontWeights.sf-pro-2}", 553 | "lineHeight": "{lineHeights.7}", 554 | "fontSize": "{fontSize.6}", 555 | "letterSpacing": "{letterSpacing.0}", 556 | "paragraphSpacing": "{paragraphSpacing.0}", 557 | "paragraphIndent": "{paragraphIndent.0}", 558 | "textCase": "{textCase.none}", 559 | "textDecoration": "{textDecoration.none}" 560 | }, 561 | "type": "typography" 562 | }, 563 | "Medium": { 564 | "value": { 565 | "fontFamily": "{fontFamilies.sf-pro}", 566 | "fontWeight": "{fontWeights.sf-pro-3}", 567 | "lineHeight": "{lineHeights.7}", 568 | "fontSize": "{fontSize.6}", 569 | "letterSpacing": "{letterSpacing.0}", 570 | "paragraphSpacing": "{paragraphSpacing.0}", 571 | "paragraphIndent": "{paragraphIndent.0}", 572 | "textCase": "{textCase.none}", 573 | "textDecoration": "{textDecoration.none}" 574 | }, 575 | "type": "typography" 576 | }, 577 | "Bold": { 578 | "value": { 579 | "fontFamily": "{fontFamilies.sf-pro}", 580 | "fontWeight": "{fontWeights.sf-pro-1}", 581 | "lineHeight": "{lineHeights.7}", 582 | "fontSize": "{fontSize.6}", 583 | "letterSpacing": "{letterSpacing.0}", 584 | "paragraphSpacing": "{paragraphSpacing.0}", 585 | "paragraphIndent": "{paragraphIndent.0}", 586 | "textCase": "{textCase.none}", 587 | "textDecoration": "{textDecoration.none}" 588 | }, 589 | "type": "typography" 590 | } 591 | }, 592 | "Featured small": { 593 | "Regular": { 594 | "value": { 595 | "fontFamily": "{fontFamilies.sf-pro}", 596 | "fontWeight": "{fontWeights.sf-pro-2}", 597 | "lineHeight": "{lineHeights.8}", 598 | "fontSize": "{fontSize.5}", 599 | "letterSpacing": "{letterSpacing.0}", 600 | "paragraphSpacing": "{paragraphSpacing.0}", 601 | "paragraphIndent": "{paragraphIndent.0}", 602 | "textCase": "{textCase.none}", 603 | "textDecoration": "{textDecoration.none}" 604 | }, 605 | "type": "typography" 606 | }, 607 | "Medium": { 608 | "value": { 609 | "fontFamily": "{fontFamilies.sf-pro}", 610 | "fontWeight": "{fontWeights.sf-pro-3}", 611 | "lineHeight": "{lineHeights.8}", 612 | "fontSize": "{fontSize.5}", 613 | "letterSpacing": "{letterSpacing.0}", 614 | "paragraphSpacing": "{paragraphSpacing.0}", 615 | "paragraphIndent": "{paragraphIndent.0}", 616 | "textCase": "{textCase.none}", 617 | "textDecoration": "{textDecoration.none}" 618 | }, 619 | "type": "typography" 620 | }, 621 | "Bold": { 622 | "value": { 623 | "fontFamily": "{fontFamilies.sf-pro}", 624 | "fontWeight": "{fontWeights.sf-pro-1}", 625 | "lineHeight": "{lineHeights.8}", 626 | "fontSize": "{fontSize.5}", 627 | "letterSpacing": "{letterSpacing.0}", 628 | "paragraphSpacing": "{paragraphSpacing.0}", 629 | "paragraphIndent": "{paragraphIndent.0}", 630 | "textCase": "{textCase.none}", 631 | "textDecoration": "{textDecoration.none}" 632 | }, 633 | "type": "typography" 634 | } 635 | }, 636 | "Body large": { 637 | "Regular": { 638 | "value": { 639 | "fontFamily": "{fontFamilies.sf-pro}", 640 | "fontWeight": "{fontWeights.sf-pro-2}", 641 | "lineHeight": "{lineHeights.8}", 642 | "fontSize": "{fontSize.4}", 643 | "letterSpacing": "{letterSpacing.0}", 644 | "paragraphSpacing": "{paragraphSpacing.0}", 645 | "paragraphIndent": "{paragraphIndent.0}", 646 | "textCase": "{textCase.none}", 647 | "textDecoration": "{textDecoration.none}" 648 | }, 649 | "type": "typography" 650 | }, 651 | "Medium": { 652 | "value": { 653 | "fontFamily": "{fontFamilies.sf-pro}", 654 | "fontWeight": "{fontWeights.sf-pro-3}", 655 | "lineHeight": "{lineHeights.8}", 656 | "fontSize": "{fontSize.4}", 657 | "letterSpacing": "{letterSpacing.0}", 658 | "paragraphSpacing": "{paragraphSpacing.0}", 659 | "paragraphIndent": "{paragraphIndent.0}", 660 | "textCase": "{textCase.none}", 661 | "textDecoration": "{textDecoration.none}" 662 | }, 663 | "type": "typography" 664 | }, 665 | "Bold": { 666 | "value": { 667 | "fontFamily": "{fontFamilies.sf-pro}", 668 | "fontWeight": "{fontWeights.sf-pro-1}", 669 | "lineHeight": "{lineHeights.8}", 670 | "fontSize": "{fontSize.4}", 671 | "letterSpacing": "{letterSpacing.0}", 672 | "paragraphSpacing": "{paragraphSpacing.0}", 673 | "paragraphIndent": "{paragraphIndent.0}", 674 | "textCase": "{textCase.none}", 675 | "textDecoration": "{textDecoration.none}" 676 | }, 677 | "type": "typography" 678 | } 679 | }, 680 | "Body medium": { 681 | "Regular": { 682 | "value": { 683 | "fontFamily": "{fontFamilies.sf-pro}", 684 | "fontWeight": "{fontWeights.sf-pro-2}", 685 | "lineHeight": "{lineHeights.9}", 686 | "fontSize": "{fontSize.3}", 687 | "letterSpacing": "{letterSpacing.0}", 688 | "paragraphSpacing": "{paragraphSpacing.0}", 689 | "paragraphIndent": "{paragraphIndent.0}", 690 | "textCase": "{textCase.none}", 691 | "textDecoration": "{textDecoration.none}" 692 | }, 693 | "type": "typography" 694 | }, 695 | "Medium": { 696 | "value": { 697 | "fontFamily": "{fontFamilies.sf-pro}", 698 | "fontWeight": "{fontWeights.sf-pro-3}", 699 | "lineHeight": "{lineHeights.9}", 700 | "fontSize": "{fontSize.3}", 701 | "letterSpacing": "{letterSpacing.0}", 702 | "paragraphSpacing": "{paragraphSpacing.0}", 703 | "paragraphIndent": "{paragraphIndent.0}", 704 | "textCase": "{textCase.none}", 705 | "textDecoration": "{textDecoration.none}" 706 | }, 707 | "type": "typography" 708 | }, 709 | "Bold": { 710 | "value": { 711 | "fontFamily": "{fontFamilies.sf-pro}", 712 | "fontWeight": "{fontWeights.sf-pro-1}", 713 | "lineHeight": "{lineHeights.9}", 714 | "fontSize": "{fontSize.3}", 715 | "letterSpacing": "{letterSpacing.0}", 716 | "paragraphSpacing": "{paragraphSpacing.0}", 717 | "paragraphIndent": "{paragraphIndent.0}", 718 | "textCase": "{textCase.none}", 719 | "textDecoration": "{textDecoration.none}" 720 | }, 721 | "type": "typography" 722 | } 723 | }, 724 | "Body small": { 725 | "Regular": { 726 | "value": { 727 | "fontFamily": "{fontFamilies.sf-pro}", 728 | "fontWeight": "{fontWeights.sf-pro-2}", 729 | "lineHeight": "{lineHeights.10}", 730 | "fontSize": "{fontSize.2}", 731 | "letterSpacing": "{letterSpacing.0}", 732 | "paragraphSpacing": "{paragraphSpacing.0}", 733 | "paragraphIndent": "{paragraphIndent.0}", 734 | "textCase": "{textCase.none}", 735 | "textDecoration": "{textDecoration.none}" 736 | }, 737 | "type": "typography" 738 | }, 739 | "Medium": { 740 | "value": { 741 | "fontFamily": "{fontFamilies.sf-pro}", 742 | "fontWeight": "{fontWeights.sf-pro-3}", 743 | "lineHeight": "{lineHeights.10}", 744 | "fontSize": "{fontSize.2}", 745 | "letterSpacing": "{letterSpacing.0}", 746 | "paragraphSpacing": "{paragraphSpacing.0}", 747 | "paragraphIndent": "{paragraphIndent.0}", 748 | "textCase": "{textCase.none}", 749 | "textDecoration": "{textDecoration.none}" 750 | }, 751 | "type": "typography" 752 | }, 753 | "Bold": { 754 | "value": { 755 | "fontFamily": "{fontFamilies.sf-pro}", 756 | "fontWeight": "{fontWeights.sf-pro-1}", 757 | "lineHeight": "{lineHeights.10}", 758 | "fontSize": "{fontSize.2}", 759 | "letterSpacing": "{letterSpacing.0}", 760 | "paragraphSpacing": "{paragraphSpacing.0}", 761 | "paragraphIndent": "{paragraphIndent.0}", 762 | "textCase": "{textCase.none}", 763 | "textDecoration": "{textDecoration.none}" 764 | }, 765 | "type": "typography" 766 | } 767 | }, 768 | "Caption large": { 769 | "Regular": { 770 | "value": { 771 | "fontFamily": "{fontFamilies.sf-pro}", 772 | "fontWeight": "{fontWeights.sf-pro-2}", 773 | "lineHeight": "{lineHeights.11}", 774 | "fontSize": "{fontSize.1}", 775 | "letterSpacing": "{letterSpacing.0}", 776 | "paragraphSpacing": "{paragraphSpacing.0}", 777 | "paragraphIndent": "{paragraphIndent.0}", 778 | "textCase": "{textCase.none}", 779 | "textDecoration": "{textDecoration.none}" 780 | }, 781 | "type": "typography" 782 | }, 783 | "Medium": { 784 | "value": { 785 | "fontFamily": "{fontFamilies.sf-pro}", 786 | "fontWeight": "{fontWeights.sf-pro-3}", 787 | "lineHeight": "{lineHeights.11}", 788 | "fontSize": "{fontSize.1}", 789 | "letterSpacing": "{letterSpacing.0}", 790 | "paragraphSpacing": "{paragraphSpacing.0}", 791 | "paragraphIndent": "{paragraphIndent.0}", 792 | "textCase": "{textCase.none}", 793 | "textDecoration": "{textDecoration.none}" 794 | }, 795 | "type": "typography" 796 | }, 797 | "Bold": { 798 | "value": { 799 | "fontFamily": "{fontFamilies.sf-pro}", 800 | "fontWeight": "{fontWeights.sf-pro-1}", 801 | "lineHeight": "{lineHeights.11}", 802 | "fontSize": "{fontSize.1}", 803 | "letterSpacing": "{letterSpacing.0}", 804 | "paragraphSpacing": "{paragraphSpacing.0}", 805 | "paragraphIndent": "{paragraphIndent.0}", 806 | "textCase": "{textCase.none}", 807 | "textDecoration": "{textDecoration.none}" 808 | }, 809 | "type": "typography" 810 | } 811 | }, 812 | "Caption medium": { 813 | "Regular": { 814 | "value": { 815 | "fontFamily": "{fontFamilies.sf-pro}", 816 | "fontWeight": "{fontWeights.sf-pro-2}", 817 | "lineHeight": "{lineHeights.12}", 818 | "fontSize": "{fontSize.0}", 819 | "letterSpacing": "{letterSpacing.0}", 820 | "paragraphSpacing": "{paragraphSpacing.0}", 821 | "paragraphIndent": "{paragraphIndent.0}", 822 | "textCase": "{textCase.none}", 823 | "textDecoration": "{textDecoration.none}" 824 | }, 825 | "type": "typography" 826 | }, 827 | "Medium": { 828 | "value": { 829 | "fontFamily": "{fontFamilies.sf-pro}", 830 | "fontWeight": "{fontWeights.sf-pro-3}", 831 | "lineHeight": "{lineHeights.12}", 832 | "fontSize": "{fontSize.0}", 833 | "letterSpacing": "{letterSpacing.0}", 834 | "paragraphSpacing": "{paragraphSpacing.0}", 835 | "paragraphIndent": "{paragraphIndent.0}", 836 | "textCase": "{textCase.none}", 837 | "textDecoration": "{textDecoration.none}" 838 | }, 839 | "type": "typography" 840 | }, 841 | "Bold": { 842 | "value": { 843 | "fontFamily": "{fontFamilies.sf-pro}", 844 | "fontWeight": "{fontWeights.sf-pro-1}", 845 | "lineHeight": "{lineHeights.12}", 846 | "fontSize": "{fontSize.0}", 847 | "letterSpacing": "{letterSpacing.0}", 848 | "paragraphSpacing": "{paragraphSpacing.0}", 849 | "paragraphIndent": "{paragraphIndent.0}", 850 | "textCase": "{textCase.none}", 851 | "textDecoration": "{textDecoration.none}" 852 | }, 853 | "type": "typography" 854 | } 855 | }, 856 | "textCase": { 857 | "none": { 858 | "value": "none", 859 | "type": "textCase" 860 | } 861 | }, 862 | "textDecoration": { 863 | "none": { 864 | "value": "none", 865 | "type": "textDecoration" 866 | } 867 | }, 868 | "paragraphIndent": { 869 | "0": { 870 | "value": "0px", 871 | "type": "dimension" 872 | } 873 | } 874 | } -------------------------------------------------------------------------------- /examples/integration-tailwind/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/integration-tailwind/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "integration-tailwind", 3 | "version": "0.0.0", 4 | "type": "module", 5 | "sideEffects": [ 6 | "*.css" 7 | ], 8 | "scripts": { 9 | "dev": "vite", 10 | "build": "tsc && vite build", 11 | "serve": "vite preview", 12 | "build:themes": "reshaped theming -o src/themes" 13 | }, 14 | "dependencies": { 15 | "react": "19.0.0", 16 | "react-dom": "19.0.0", 17 | "reshaped": "3.3.12" 18 | }, 19 | "devDependencies": { 20 | "@types/react": "19.0.8", 21 | "@types/react-dom": "19.0.3", 22 | "@vitejs/plugin-react": "4.3.4", 23 | "postcss": "8.5.1", 24 | "tailwindcss": "4.0.3", 25 | "@tailwindcss/vite": "4.0.3", 26 | "typescript": "5.7.3", 27 | "vite": "6.0.11" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /examples/integration-tailwind/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | const { config } = require("reshaped/config/postcss"); 2 | 3 | module.exports = { 4 | plugins: { 5 | ...config.plugins, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /examples/integration-tailwind/src/App.tsx: -------------------------------------------------------------------------------- 1 | import "./index.css"; 2 | import { Reshaped } from "reshaped"; 3 | import "reshaped/themes/reshaped/theme.css"; 4 | import Demo from "./components/Demo"; 5 | 6 | const App = () => { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | }; 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /examples/integration-tailwind/src/components/Demo/Demo.tsx: -------------------------------------------------------------------------------- 1 | import { Button, Container, View, Text, useTheme, MenuItem } from "reshaped"; 2 | 3 | const Demo = () => { 4 | const { invertColorMode } = useTheme(); 5 | 6 | return ( 7 | 8 | 9 | 10 | 🎉 11 | 12 | Welcome to Reshaped 13 | 14 | 15 | Reshaped is a professionally crafted design system for everyday 16 | product development made to match your brand. In this example 17 | repository we're using it together with Vite. 18 | 19 | 20 | 28 | 29 |
30 | Tailwind is used here with Reshaped tokens 31 |
32 | 35 | 36 | {}}>Hello 37 | 38 | 39 | 40 | ); 41 | }; 42 | 43 | export default Demo; 44 | -------------------------------------------------------------------------------- /examples/integration-tailwind/src/components/Demo/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./Demo"; 2 | -------------------------------------------------------------------------------- /examples/integration-tailwind/src/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /examples/integration-tailwind/src/icons/Bookmark.tsx: -------------------------------------------------------------------------------- 1 | const IconBookmark = () => ( 2 | 11 | 12 | 13 | ); 14 | 15 | export default IconBookmark; 16 | -------------------------------------------------------------------------------- /examples/integration-tailwind/src/icons/Clock.tsx: -------------------------------------------------------------------------------- 1 | const IconClock = () => ( 2 | 11 | 12 | 13 | 14 | ); 15 | 16 | export default IconClock; 17 | -------------------------------------------------------------------------------- /examples/integration-tailwind/src/icons/CloseSquare.tsx: -------------------------------------------------------------------------------- 1 | const IconCloseSquare = () => ( 2 | 11 | 12 | 13 | 14 | 15 | ); 16 | 17 | export default IconCloseSquare; 18 | -------------------------------------------------------------------------------- /examples/integration-tailwind/src/icons/Message.tsx: -------------------------------------------------------------------------------- 1 | const IconMessage = () => ( 2 | 11 | 12 | 13 | ); 14 | 15 | export default IconMessage; 16 | -------------------------------------------------------------------------------- /examples/integration-tailwind/src/icons/Moon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const IconMoon = () => { 4 | return ( 5 | 14 | 15 | 16 | ); 17 | }; 18 | 19 | export default IconMoon; 20 | -------------------------------------------------------------------------------- /examples/integration-tailwind/src/icons/More.tsx: -------------------------------------------------------------------------------- 1 | export const IconMore = () => ( 2 | 13 | 14 | 15 | 16 | 17 | ); 18 | 19 | export default IconMore; 20 | -------------------------------------------------------------------------------- /examples/integration-tailwind/src/icons/Share.tsx: -------------------------------------------------------------------------------- 1 | const IconShare = () => ( 2 | 11 | 12 | 13 | 14 | 15 | ); 16 | 17 | export default IconShare; 18 | -------------------------------------------------------------------------------- /examples/integration-tailwind/src/icons/Sun.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const IconSun = () => { 4 | return ( 5 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ); 25 | }; 26 | 27 | export default IconSun; 28 | -------------------------------------------------------------------------------- /examples/integration-tailwind/src/icons/ThumbsUp.tsx: -------------------------------------------------------------------------------- 1 | const IconThumbsUp = () => ( 2 | 11 | 12 | 13 | ); 14 | 15 | export default IconThumbsUp; 16 | -------------------------------------------------------------------------------- /examples/integration-tailwind/src/icons/UserCheck.tsx: -------------------------------------------------------------------------------- 1 | const IconUserCheck = () => ( 2 | 11 | 12 | 13 | 14 | 15 | ); 16 | 17 | export default IconUserCheck; 18 | -------------------------------------------------------------------------------- /examples/integration-tailwind/src/icons/UserMinus.tsx: -------------------------------------------------------------------------------- 1 | const IconUserMinus = () => ( 2 | 11 | 12 | 13 | 14 | 15 | ); 16 | 17 | export default IconUserMinus; 18 | -------------------------------------------------------------------------------- /examples/integration-tailwind/src/icons/Users.tsx: -------------------------------------------------------------------------------- 1 | const IconUsers = () => ( 2 | 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | 18 | export default IconUsers; 19 | -------------------------------------------------------------------------------- /examples/integration-tailwind/src/index.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | @theme { 4 | --color-*: initial; 5 | } 6 | 7 | @import "reshaped/themes/reshaped/tailwind.css"; 8 | -------------------------------------------------------------------------------- /examples/integration-tailwind/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from "react-dom/client"; 2 | import App from "./App"; 3 | 4 | const root = createRoot(document.getElementById("root")!); 5 | root.render(); 6 | -------------------------------------------------------------------------------- /examples/integration-tailwind/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/integration-tailwind/tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | const { getTheme } = require("reshaped/config/tailwind"); 2 | 3 | const theme = getTheme(); 4 | 5 | /** @type {import('tailwindcss').Config} */ 6 | module.exports = { 7 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 8 | theme, 9 | }; 10 | -------------------------------------------------------------------------------- /examples/integration-tailwind/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "bundler", 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react-jsx" 17 | }, 18 | "include": ["./src"] 19 | } 20 | -------------------------------------------------------------------------------- /examples/integration-tailwind/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | import tailwindcss from "@tailwindcss/vite"; 4 | 5 | export default defineConfig({ 6 | plugins: [react(), tailwindcss()], 7 | }); 8 | -------------------------------------------------------------------------------- /examples/starter-cra/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /examples/starter-cra/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | -------------------------------------------------------------------------------- /examples/starter-cra/craco.config.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = { 3 | style: { 4 | postcss: { 5 | mode: 'file', 6 | } 7 | } 8 | } -------------------------------------------------------------------------------- /examples/starter-cra/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cra-starter", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@craco/craco": "7.1.0", 7 | "@testing-library/jest-dom": "6.4.6", 8 | "@testing-library/react": "16.0.0", 9 | "@testing-library/user-event": "14.5.2", 10 | "@types/jest": "29.5.12", 11 | "@types/node": "20.14.10", 12 | "@types/react": "18.3.3", 13 | "@types/react-dom": "18.3.0", 14 | "react": "18.3.1", 15 | "react-dom": "18.3.1", 16 | "react-scripts": "5.0.1", 17 | "reshaped": "3.0.1", 18 | "typescript": "4", 19 | "web-vitals": "4.2.1" 20 | }, 21 | "scripts": { 22 | "start": "craco start", 23 | "build": "craco build", 24 | "test": "craco test" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /examples/starter-cra/postcss.config.js: -------------------------------------------------------------------------------- 1 | const { config } = require("reshaped/config/postcss"); 2 | 3 | module.exports = config 4 | -------------------------------------------------------------------------------- /examples/starter-cra/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formaat-design/reshaped/313b3b64b4ca4b896b64cfe2df0349c26e425e34/examples/starter-cra/public/favicon.ico -------------------------------------------------------------------------------- /examples/starter-cra/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /examples/starter-cra/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formaat-design/reshaped/313b3b64b4ca4b896b64cfe2df0349c26e425e34/examples/starter-cra/public/logo192.png -------------------------------------------------------------------------------- /examples/starter-cra/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formaat-design/reshaped/313b3b64b4ca4b896b64cfe2df0349c26e425e34/examples/starter-cra/public/logo512.png -------------------------------------------------------------------------------- /examples/starter-cra/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /examples/starter-cra/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /examples/starter-cra/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /examples/starter-cra/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { Reshaped } from "reshaped"; 2 | import "reshaped/themes/reshaped/theme.css"; 3 | import Demo from "./components/Demo"; 4 | 5 | const App = () => ( 6 | 7 | 8 | 9 | ); 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /examples/starter-cra/src/components/Demo/Demo.module.css: -------------------------------------------------------------------------------- 1 | .customComponent { 2 | background: var(--rs-color-background-positive-faded); 3 | padding: var(--rs-unit-x2); 4 | border-radius: var(--rs-unit-radius-small); 5 | } 6 | 7 | @media (--rs-viewport-l) { 8 | .customComponent { 9 | background: var(--rs-color-background-critical-faded); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/starter-cra/src/components/Demo/Demo.tsx: -------------------------------------------------------------------------------- 1 | import { Container, View, Text, Button } from "reshaped"; 2 | import s from "./Demo.module.css"; 3 | 4 | const Demo = () => { 5 | return ( 6 | 7 | 8 | 9 | 🎉 10 | 11 | Welcome to Reshaped 12 | 13 | 14 | Reshaped is a professionally crafted design system for everyday 15 | product development made to match your brand. In this example 16 | repository we're using it together with NextJS 17 | 18 | 19 | 27 | 28 | 29 |
Custom component with styles
30 | 31 | 32 | 33 | ); 34 | }; 35 | 36 | export default Demo; 37 | -------------------------------------------------------------------------------- /examples/starter-cra/src/components/Demo/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./Demo"; 2 | -------------------------------------------------------------------------------- /examples/starter-cra/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./App"; 4 | // import reportWebVitals from "./reportWebVitals"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | 13 | // If you want to start measuring performance in your app, pass a function 14 | // to log results (for example: reportWebVitals(console.log)) 15 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 16 | // reportWebVitals(); 17 | -------------------------------------------------------------------------------- /examples/starter-cra/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/starter-cra/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/starter-cra/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /examples/starter-cra/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "bundler", 18 | "isolatedModules": true, 19 | "noEmit": true, 20 | "jsx": "react-jsx" 21 | }, 22 | "include": [ 23 | "src" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /examples/starter-next/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /examples/starter-next/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | 36 | # typescript 37 | *.tsbuildinfo 38 | -------------------------------------------------------------------------------- /examples/starter-next/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /examples/starter-next/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /examples/starter-next/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import App from "../components/App"; 2 | 3 | export default function RootLayout({ 4 | children, 5 | }: { 6 | children: React.ReactNode; 7 | }) { 8 | return ( 9 | 10 | 11 | {children} 12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /examples/starter-next/app/page.tsx: -------------------------------------------------------------------------------- 1 | import Demo from "../components/Demo"; 2 | 3 | export default function Home() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /examples/starter-next/components/App/App.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /examples/starter-next/components/App/App.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React from "react"; 4 | import { Reshaped } from "reshaped"; 5 | import "reshaped/themes/reshaped/theme.css"; 6 | import "./App.css"; 7 | 8 | const App = (props: { children: React.ReactNode }) => { 9 | return {props.children}; 10 | }; 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /examples/starter-next/components/App/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./App"; 2 | -------------------------------------------------------------------------------- /examples/starter-next/components/Demo/Demo.module.css: -------------------------------------------------------------------------------- 1 | .customComponent { 2 | background: var(--rs-color-background-positive-faded); 3 | padding: var(--rs-unit-x2); 4 | border-radius: var(--rs-unit-radius-small); 5 | } 6 | 7 | @media (--rs-viewport-l) { 8 | .customComponent { 9 | background: var(--rs-color-background-critical-faded); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/starter-next/components/Demo/Demo.tsx: -------------------------------------------------------------------------------- 1 | import { Container, View, Text, Button, MenuItem } from "reshaped"; 2 | import s from "./Demo.module.css"; 3 | 4 | const Demo = () => { 5 | return ( 6 | 7 | 8 | 9 | 🎉 10 | 11 | Welcome to Reshaped 12 | 13 | 14 | Reshaped is a professionally crafted design system for everyday 15 | product development made to match your brand. In this example 16 | repository we're using it together with NextJS 17 | 18 | 19 | 27 | 28 | 29 |
Custom component with styles
30 | 31 | Hello 32 | 33 |
34 | Hello 35 |
36 | 37 | 38 | 39 | ); 40 | }; 41 | 42 | export default Demo; 43 | -------------------------------------------------------------------------------- /examples/starter-next/components/Demo/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./Demo"; 2 | -------------------------------------------------------------------------------- /examples/starter-next/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /examples/starter-next/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import("next").NextConfig} */ 2 | const nextConfig = { 3 | transpilePackages: ["reshaped"], 4 | experimental: { 5 | optimizePackageImports: ["reshaped"], 6 | }, 7 | }; 8 | 9 | module.exports = nextConfig; 10 | -------------------------------------------------------------------------------- /examples/starter-next/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next-starter", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev --turbo", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "next": "14.2.4", 13 | "react": "18.3.1", 14 | "react-dom": "18.3.1", 15 | "reshaped": "3.0.0", 16 | "autoprefixer": "10.4.19", 17 | "postcss": "8.4.39", 18 | "tailwindcss": "3.4.4" 19 | }, 20 | "devDependencies": { 21 | "@types/node": "20.14.10", 22 | "@types/react": "18.3.3", 23 | "eslint": "8.57.0", 24 | "eslint-config-next": "14.2.4", 25 | "typescript": "5.5.3" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/starter-next/postcss.config.js: -------------------------------------------------------------------------------- 1 | const { config } = require("reshaped/config/postcss"); 2 | 3 | module.exports = { 4 | plugins: { 5 | ...config.plugins, 6 | tailwindcss: {}, 7 | autoprefixer: {}, 8 | }, 9 | }; 10 | -------------------------------------------------------------------------------- /examples/starter-next/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formaat-design/reshaped/313b3b64b4ca4b896b64cfe2df0349c26e425e34/examples/starter-next/public/favicon.ico -------------------------------------------------------------------------------- /examples/starter-next/public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /examples/starter-next/tailwind.config.js: -------------------------------------------------------------------------------- 1 | const { getTheme } = require("reshaped/config/tailwind"); 2 | 3 | const theme = getTheme(); 4 | 5 | /** @type {import('tailwindcss').Config} */ 6 | module.exports = { 7 | content: [ 8 | './app/**/*.{ts,tsx}', 9 | './components/**/*.{ts,tsx}', 10 | ], 11 | theme, 12 | }; 13 | -------------------------------------------------------------------------------- /examples/starter-next/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "strict": true, 12 | "forceConsistentCasingInFileNames": true, 13 | "noEmit": true, 14 | "esModuleInterop": true, 15 | "module": "esnext", 16 | "moduleResolution": "bundler", 17 | "isolatedModules": true, 18 | "jsx": "preserve", 19 | "incremental": true, 20 | "plugins": [ 21 | { 22 | "name": "next" 23 | } 24 | ], 25 | "resolveJsonModule": true 26 | }, 27 | "include": [ 28 | "next-env.d.ts", 29 | "**/*.ts", 30 | "**/*.tsx", 31 | ".next/types/**/*.ts" 32 | ], 33 | "exclude": [ 34 | "node_modules" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /examples/starter-remix/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | /** 2 | * This is intended to be a basic starting point for linting in your app. 3 | * It relies on recommended configs out of the box for simplicity, but you can 4 | * and should modify this configuration to best suit your team's needs. 5 | */ 6 | 7 | /** @type {import('eslint').Linter.Config} */ 8 | module.exports = { 9 | root: true, 10 | parserOptions: { 11 | ecmaVersion: "latest", 12 | sourceType: "module", 13 | ecmaFeatures: { 14 | jsx: true, 15 | }, 16 | }, 17 | env: { 18 | browser: true, 19 | commonjs: true, 20 | es6: true, 21 | }, 22 | 23 | // Base config 24 | extends: ["eslint:recommended"], 25 | 26 | overrides: [ 27 | // React 28 | { 29 | files: ["**/*.{js,jsx,ts,tsx}"], 30 | plugins: ["react", "jsx-a11y"], 31 | extends: [ 32 | "plugin:react/recommended", 33 | "plugin:react/jsx-runtime", 34 | "plugin:react-hooks/recommended", 35 | "plugin:jsx-a11y/recommended", 36 | ], 37 | settings: { 38 | react: { 39 | version: "detect", 40 | }, 41 | formComponents: ["Form"], 42 | linkComponents: [ 43 | { name: "Link", linkAttribute: "to" }, 44 | { name: "NavLink", linkAttribute: "to" }, 45 | ], 46 | }, 47 | }, 48 | 49 | // Typescript 50 | { 51 | files: ["**/*.{ts,tsx}"], 52 | plugins: ["@typescript-eslint", "import"], 53 | parser: "@typescript-eslint/parser", 54 | settings: { 55 | "import/internal-regex": "^~/", 56 | "import/resolver": { 57 | node: { 58 | extensions: [".ts", ".tsx"], 59 | }, 60 | typescript: { 61 | alwaysTryTypes: true, 62 | }, 63 | }, 64 | }, 65 | extends: [ 66 | "plugin:@typescript-eslint/recommended", 67 | "plugin:import/recommended", 68 | "plugin:import/typescript", 69 | ], 70 | }, 71 | 72 | // Node 73 | { 74 | files: [".eslintrc.js"], 75 | env: { 76 | node: true, 77 | }, 78 | }, 79 | ], 80 | }; 81 | -------------------------------------------------------------------------------- /examples/starter-remix/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | /.cache 4 | /build 5 | /public/build 6 | .env 7 | -------------------------------------------------------------------------------- /examples/starter-remix/.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /examples/starter-remix/README.md: -------------------------------------------------------------------------------- 1 | # Welcome to Remix! 2 | 3 | - [Remix Docs](https://remix.run/docs) 4 | 5 | ## Development 6 | 7 | From your terminal: 8 | 9 | ```sh 10 | npm run dev 11 | ``` 12 | 13 | This starts your app in development mode, rebuilding assets on file changes. 14 | 15 | ## Deployment 16 | 17 | First, build your app for production: 18 | 19 | ```sh 20 | npm run build 21 | ``` 22 | 23 | Then run the app in production mode: 24 | 25 | ```sh 26 | npm start 27 | ``` 28 | 29 | Now you'll need to pick a host to deploy it to. 30 | 31 | ### DIY 32 | 33 | If you're familiar with deploying node applications, the built-in Remix app server is production-ready. 34 | 35 | Make sure to deploy the output of `remix build` 36 | 37 | - `build/` 38 | - `public/build/` 39 | -------------------------------------------------------------------------------- /examples/starter-remix/app/components/Demo/Demo.module.css: -------------------------------------------------------------------------------- 1 | .customComponent { 2 | background: var(--rs-color-background-positive-faded); 3 | padding: var(--rs-unit-x2); 4 | border-radius: var(--rs-unit-radius-small); 5 | } 6 | 7 | @media (--rs-viewport-l) { 8 | .customComponent { 9 | background: var(--rs-color-background-critical-faded); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/starter-remix/app/components/Demo/Demo.tsx: -------------------------------------------------------------------------------- 1 | import { Button, Container, View, Text } from "reshaped"; 2 | import styles from "./Demo.module.css"; 3 | 4 | const Demo = () => { 5 | return ( 6 | 7 | 8 | 9 | 🎉 10 | 11 | Welcome to Reshaped 12 | 13 | 14 | Reshaped is a professionally crafted design system for everyday 15 | product development made to match your brand. In this example 16 | repository we're using it together with Remix. 17 | 18 | 19 | 27 | 28 |
29 | Custom component with styles 30 |
31 | 32 | 33 | 34 | ); 35 | }; 36 | 37 | export default Demo; 38 | -------------------------------------------------------------------------------- /examples/starter-remix/app/components/Demo/index.ts: -------------------------------------------------------------------------------- 1 | export { default, links as demoLinks } from "./Demo"; 2 | -------------------------------------------------------------------------------- /examples/starter-remix/app/root.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Links, 3 | Meta, 4 | Outlet, 5 | Scripts, 6 | ScrollRestoration, 7 | } from "@remix-run/react"; 8 | import { Reshaped } from "reshaped"; 9 | import "reshaped/themes/reshaped/theme.css"; 10 | 11 | export default function App() { 12 | return ( 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /examples/starter-remix/app/routes/_index.tsx: -------------------------------------------------------------------------------- 1 | import type { MetaFunction } from "@remix-run/node"; 2 | import Demo from "../components/Demo"; 3 | 4 | export const meta: MetaFunction = () => { 5 | return [ 6 | { title: "New Remix App" }, 7 | { name: "description", content: "Welcome to Remix!" }, 8 | ]; 9 | }; 10 | 11 | export default function Index() { 12 | return ; 13 | } 14 | -------------------------------------------------------------------------------- /examples/starter-remix/entry.server.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * By default, Remix will handle generating the HTTP Response for you. 3 | * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨ 4 | * For more information, see https://remix.run/file-conventions/entry.server 5 | */ 6 | 7 | import { PassThrough } from "node:stream"; 8 | 9 | import type { AppLoadContext, EntryContext } from "@remix-run/node"; 10 | import { createReadableStreamFromReadable } from "@remix-run/node"; 11 | import { RemixServer } from "@remix-run/react"; 12 | import { isbot } from "isbot"; 13 | import { renderToPipeableStream } from "react-dom/server"; 14 | 15 | const ABORT_DELAY = 5_000; 16 | 17 | export default function handleRequest( 18 | request: Request, 19 | responseStatusCode: number, 20 | responseHeaders: Headers, 21 | remixContext: EntryContext, 22 | // This is ignored so we can keep it in the template for visibility. Feel 23 | // free to delete this parameter in your app if you're not using it! 24 | // eslint-disable-next-line @typescript-eslint/no-unused-vars 25 | loadContext: AppLoadContext 26 | ) { 27 | return isbot(request.headers.get("user-agent")) 28 | ? handleBotRequest( 29 | request, 30 | responseStatusCode, 31 | responseHeaders, 32 | remixContext 33 | ) 34 | : handleBrowserRequest( 35 | request, 36 | responseStatusCode, 37 | responseHeaders, 38 | remixContext 39 | ); 40 | } 41 | 42 | function handleBotRequest( 43 | request: Request, 44 | responseStatusCode: number, 45 | responseHeaders: Headers, 46 | remixContext: EntryContext 47 | ) { 48 | return new Promise((resolve, reject) => { 49 | let shellRendered = false; 50 | const { pipe, abort } = renderToPipeableStream( 51 | , 56 | { 57 | onAllReady() { 58 | shellRendered = true; 59 | const body = new PassThrough(); 60 | const stream = createReadableStreamFromReadable(body); 61 | 62 | responseHeaders.set("Content-Type", "text/html"); 63 | 64 | resolve( 65 | new Response(stream, { 66 | headers: responseHeaders, 67 | status: responseStatusCode, 68 | }) 69 | ); 70 | 71 | pipe(body); 72 | }, 73 | onShellError(error: unknown) { 74 | reject(error); 75 | }, 76 | onError(error: unknown) { 77 | responseStatusCode = 500; 78 | // Log streaming rendering errors from inside the shell. Don't log 79 | // errors encountered during initial shell rendering since they'll 80 | // reject and get logged in handleDocumentRequest. 81 | if (shellRendered) { 82 | console.error(error); 83 | } 84 | }, 85 | } 86 | ); 87 | 88 | setTimeout(abort, ABORT_DELAY); 89 | }); 90 | } 91 | 92 | function handleBrowserRequest( 93 | request: Request, 94 | responseStatusCode: number, 95 | responseHeaders: Headers, 96 | remixContext: EntryContext 97 | ) { 98 | return new Promise((resolve, reject) => { 99 | let shellRendered = false; 100 | const { pipe, abort } = renderToPipeableStream( 101 | , 106 | { 107 | onShellReady() { 108 | shellRendered = true; 109 | const body = new PassThrough(); 110 | const stream = createReadableStreamFromReadable(body); 111 | 112 | responseHeaders.set("Content-Type", "text/html"); 113 | 114 | resolve( 115 | new Response(stream, { 116 | headers: responseHeaders, 117 | status: responseStatusCode, 118 | }) 119 | ); 120 | 121 | pipe(body); 122 | }, 123 | onShellError(error: unknown) { 124 | reject(error); 125 | }, 126 | onError(error: unknown) { 127 | responseStatusCode = 500; 128 | // Log streaming rendering errors from inside the shell. Don't log 129 | // errors encountered during initial shell rendering since they'll 130 | // reject and get logged in handleDocumentRequest. 131 | if (shellRendered) { 132 | console.error(error); 133 | } 134 | }, 135 | } 136 | ); 137 | 138 | setTimeout(abort, ABORT_DELAY); 139 | }); 140 | } 141 | -------------------------------------------------------------------------------- /examples/starter-remix/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /examples/starter-remix/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-remix-app", 3 | "private": true, 4 | "sideEffects": false, 5 | "type": "module", 6 | "scripts": { 7 | "build": "remix vite:build", 8 | "dev": "remix vite:dev", 9 | "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .", 10 | "start": "remix-serve ./build/index.js", 11 | "typecheck": "tsc" 12 | }, 13 | "dependencies": { 14 | "@remix-run/node": "2.10.2", 15 | "@remix-run/react": "2.10.2", 16 | "@remix-run/serve": "2.10.2", 17 | "isbot": "4", 18 | "react": "18.3.1", 19 | "react-dom": "18.3.1", 20 | "reshaped": "3.0.0" 21 | }, 22 | "devDependencies": { 23 | "vite": "5.3.3", 24 | "vite-tsconfig-paths": "4.3.2", 25 | "@remix-run/dev": "2.10.2", 26 | "@types/react": "18.3.3", 27 | "@types/react-dom": "18.3.0", 28 | "@typescript-eslint/eslint-plugin": "7.1.1", 29 | "eslint": "8.57.0", 30 | "eslint-config-prettier": "9.1.0", 31 | "eslint-plugin-import": "2.29.1", 32 | "eslint-plugin-jsx-a11y": "6.8.0", 33 | "eslint-plugin-react": "7.34.0", 34 | "eslint-plugin-react-hooks": "4.6.0", 35 | "typescript": "5.5.3" 36 | }, 37 | "engines": { 38 | "node": ">=18.0.0" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /examples/starter-remix/postcss.config.js: -------------------------------------------------------------------------------- 1 | import { config } from "reshaped/config/postcss.js"; 2 | 3 | export default config; 4 | -------------------------------------------------------------------------------- /examples/starter-remix/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formaat-design/reshaped/313b3b64b4ca4b896b64cfe2df0349c26e425e34/examples/starter-remix/public/favicon.ico -------------------------------------------------------------------------------- /examples/starter-remix/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["env.d.ts", "**/*.ts", "**/*.tsx"], 3 | "compilerOptions": { 4 | "lib": ["DOM", "DOM.Iterable", "ES2022"], 5 | "isolatedModules": true, 6 | "esModuleInterop": true, 7 | "jsx": "react-jsx", 8 | "moduleResolution": "Bundler", 9 | "resolveJsonModule": true, 10 | "target": "ES2022", 11 | "strict": true, 12 | "allowJs": true, 13 | "skipLibCheck": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "baseUrl": ".", 16 | "paths": { 17 | "~/*": ["./app/*"] 18 | }, 19 | 20 | // Remix takes care of building everything in `remix build`. 21 | "noEmit": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/starter-remix/vite.config.js: -------------------------------------------------------------------------------- 1 | import { vitePlugin as remix } from "@remix-run/dev"; 2 | import { installGlobals } from "@remix-run/node"; 3 | import { defineConfig } from "vite"; 4 | import tsconfigPaths from "vite-tsconfig-paths"; 5 | 6 | installGlobals(); 7 | 8 | export default defineConfig({ 9 | ssr: { noExternal: ["reshaped"] }, 10 | plugins: [remix(), tsconfigPaths()], 11 | }); 12 | -------------------------------------------------------------------------------- /examples/starter-vite/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /.DS_Store 3 | /dist 4 | /dist-ssr 5 | /*.local 6 | -------------------------------------------------------------------------------- /examples/starter-vite/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /examples/starter-vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-starter", 3 | "version": "0.0.0", 4 | "type": "module", 5 | "sideEffects": false, 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc && vite build", 9 | "serve": "vite preview" 10 | }, 11 | "dependencies": { 12 | "reshaped": "3.0.0", 13 | "react": "18.3.1", 14 | "react-dom": "18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "18.3.3", 18 | "@types/react-dom": "18.3.0", 19 | "@vitejs/plugin-react": "4.3.1", 20 | "typescript": "5.5.3", 21 | "vite": "5.3.3" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/starter-vite/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | const { config } = require("reshaped/config/postcss"); 2 | 3 | module.exports = config; 4 | -------------------------------------------------------------------------------- /examples/starter-vite/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { Reshaped } from "reshaped"; 2 | import "reshaped/themes/reshaped/theme.css"; 3 | import Demo from "./components/Demo"; 4 | 5 | const App = () => { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | }; 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /examples/starter-vite/src/components/Demo/Demo.module.css: -------------------------------------------------------------------------------- 1 | .customComponent { 2 | background: var(--rs-color-background-positive-faded); 3 | padding: var(--rs-unit-x2); 4 | border-radius: var(--rs-unit-radius-small); 5 | } 6 | 7 | @media (--rs-viewport-l) { 8 | .customComponent { 9 | background: var(--rs-color-background-critical-faded); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/starter-vite/src/components/Demo/Demo.tsx: -------------------------------------------------------------------------------- 1 | import { Button, Container, View, Text } from "reshaped"; 2 | import s from "./Demo.module.css"; 3 | 4 | const Demo = () => { 5 | return ( 6 | 7 | 8 | 9 | 🎉 10 | 11 | Welcome to Reshaped 12 | 13 | 14 | Reshaped is a professionally crafted design system for everyday 15 | product development made to match your brand. In this example 16 | repository we're using it together with Vite. 17 | 18 | 19 | 27 | 28 |
Custom component with styles
29 | 30 | 31 | 32 | ); 33 | }; 34 | 35 | export default Demo; 36 | -------------------------------------------------------------------------------- /examples/starter-vite/src/components/Demo/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./Demo"; 2 | -------------------------------------------------------------------------------- /examples/starter-vite/src/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /examples/starter-vite/src/icons/Bookmark.tsx: -------------------------------------------------------------------------------- 1 | const IconBookmark = () => ( 2 | 11 | 12 | 13 | ); 14 | 15 | export default IconBookmark; 16 | -------------------------------------------------------------------------------- /examples/starter-vite/src/icons/Clock.tsx: -------------------------------------------------------------------------------- 1 | const IconClock = () => ( 2 | 11 | 12 | 13 | 14 | ); 15 | 16 | export default IconClock; 17 | -------------------------------------------------------------------------------- /examples/starter-vite/src/icons/CloseSquare.tsx: -------------------------------------------------------------------------------- 1 | const IconCloseSquare = () => ( 2 | 11 | 12 | 13 | 14 | 15 | ); 16 | 17 | export default IconCloseSquare; 18 | -------------------------------------------------------------------------------- /examples/starter-vite/src/icons/Message.tsx: -------------------------------------------------------------------------------- 1 | const IconMessage = () => ( 2 | 11 | 12 | 13 | ); 14 | 15 | export default IconMessage; 16 | -------------------------------------------------------------------------------- /examples/starter-vite/src/icons/Moon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const IconMoon = () => { 4 | return ( 5 | 14 | 15 | 16 | ); 17 | }; 18 | 19 | export default IconMoon; 20 | -------------------------------------------------------------------------------- /examples/starter-vite/src/icons/More.tsx: -------------------------------------------------------------------------------- 1 | export const IconMore = () => ( 2 | 13 | 14 | 15 | 16 | 17 | ); 18 | 19 | export default IconMore; 20 | -------------------------------------------------------------------------------- /examples/starter-vite/src/icons/Share.tsx: -------------------------------------------------------------------------------- 1 | const IconShare = () => ( 2 | 11 | 12 | 13 | 14 | 15 | ); 16 | 17 | export default IconShare; 18 | -------------------------------------------------------------------------------- /examples/starter-vite/src/icons/Sun.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const IconSun = () => { 4 | return ( 5 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ); 25 | }; 26 | 27 | export default IconSun; 28 | -------------------------------------------------------------------------------- /examples/starter-vite/src/icons/ThumbsUp.tsx: -------------------------------------------------------------------------------- 1 | const IconThumbsUp = () => ( 2 | 11 | 12 | 13 | ); 14 | 15 | export default IconThumbsUp; 16 | -------------------------------------------------------------------------------- /examples/starter-vite/src/icons/UserCheck.tsx: -------------------------------------------------------------------------------- 1 | const IconUserCheck = () => ( 2 | 11 | 12 | 13 | 14 | 15 | ); 16 | 17 | export default IconUserCheck; 18 | -------------------------------------------------------------------------------- /examples/starter-vite/src/icons/UserMinus.tsx: -------------------------------------------------------------------------------- 1 | const IconUserMinus = () => ( 2 | 11 | 12 | 13 | 14 | 15 | ); 16 | 17 | export default IconUserMinus; 18 | -------------------------------------------------------------------------------- /examples/starter-vite/src/icons/Users.tsx: -------------------------------------------------------------------------------- 1 | const IconUsers = () => ( 2 | 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | 18 | export default IconUsers; 19 | -------------------------------------------------------------------------------- /examples/starter-vite/src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./App"; 4 | 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById("root") 10 | ); 11 | -------------------------------------------------------------------------------- /examples/starter-vite/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /examples/starter-vite/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Bundler", 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react-jsx" 17 | }, 18 | "include": ["./src"] 19 | } 20 | -------------------------------------------------------------------------------- /examples/starter-vite/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | 4 | export default defineConfig({ 5 | plugins: [react()], 6 | }); 7 | -------------------------------------------------------------------------------- /examples/starter-webpack/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /dist -------------------------------------------------------------------------------- /examples/starter-webpack/README.md: -------------------------------------------------------------------------------- 1 | ## Reshaped - Webpack starter 2 | 3 | This is a starter example for [Reshaped](https://reshaped.so) using a simple Webpack config. 4 | -------------------------------------------------------------------------------- /examples/starter-webpack/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-starter", 3 | "version": "0.1.13", 4 | "license": "MIT", 5 | "private": true, 6 | "sideEffects": [ 7 | "*.css" 8 | ], 9 | "scripts": { 10 | "start": "webpack serve", 11 | "build": "webpack" 12 | }, 13 | "dependencies": { 14 | "reshaped": "3.0.0", 15 | "react": "18.3.1", 16 | "react-dom": "18.3.1" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "18.3.3", 20 | "@types/react-dom": "18.3.0", 21 | "css-loader": "6.7.3", 22 | "html-webpack-plugin": "5.5.1", 23 | "mini-css-extract-plugin": "2.7.5", 24 | "postcss-loader": "7.3.0", 25 | "style-loader": "3.3.2", 26 | "ts-loader": "9.4.2", 27 | "typescript": "5.5.3", 28 | "webpack": "5.82.0", 29 | "webpack-cli": "5.0.2", 30 | "webpack-dev-server": "4.13.3" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /examples/starter-webpack/postcss.config.js: -------------------------------------------------------------------------------- 1 | const { config } = require("reshaped/config/postcss"); 2 | 3 | module.exports = config; 4 | -------------------------------------------------------------------------------- /examples/starter-webpack/src/components/Demo/Demo.module.css: -------------------------------------------------------------------------------- 1 | .customComponent { 2 | background: var(--rs-color-background-positive-faded); 3 | padding: var(--rs-unit-x2); 4 | border-radius: var(--rs-unit-radius-small); 5 | } 6 | 7 | @media (--rs-viewport-l) { 8 | .customComponent { 9 | background: var(--rs-color-background-critical-faded); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/starter-webpack/src/components/Demo/Demo.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Button, Container, View, Text } from "reshaped"; 3 | import s from "./Demo.module.css"; 4 | 5 | const Demo = () => { 6 | return ( 7 | 8 | 9 | 10 | 🎉 11 | 12 | Welcome to Reshaped 13 | 14 | 15 | Reshaped is a professionally crafted design system for everyday 16 | product development made to match your brand. In this example 17 | repository we're using it together with Webpack. 18 | 19 | 20 | 28 | 29 |
Custom component with styles
30 | 31 | 32 | 33 | ); 34 | }; 35 | 36 | export default Demo; 37 | -------------------------------------------------------------------------------- /examples/starter-webpack/src/components/Demo/index.ts: -------------------------------------------------------------------------------- 1 | export { default } from "./Demo"; 2 | -------------------------------------------------------------------------------- /examples/starter-webpack/src/custom.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.css" { 2 | interface IClassNames { 3 | [className: string]: string; 4 | } 5 | const classNames: IClassNames; 6 | export = classNames; 7 | } 8 | -------------------------------------------------------------------------------- /examples/starter-webpack/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | -------------------------------------------------------------------------------- /examples/starter-webpack/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import { Reshaped } from "reshaped"; 4 | import "reshaped/themes/reshaped/theme.css"; 5 | import Demo from "./components/Demo"; 6 | 7 | const App = () => { 8 | return ( 9 | 10 | 11 | 12 | ); 13 | }; 14 | 15 | ReactDOM.render(, document.getElementById("root")); 16 | -------------------------------------------------------------------------------- /examples/starter-webpack/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strict": true, 4 | "esModuleInterop": true, 5 | "declaration": true, 6 | "pretty": true, 7 | "allowSyntheticDefaultImports": true, 8 | "lib": ["es2017", "dom"], 9 | "jsx": "react", 10 | "target": "es5", 11 | "module": "ESNext", 12 | "moduleResolution": "Bundler", 13 | "outDir": "./dist", 14 | "baseUrl": "./src", 15 | "rootDir": "./src" 16 | }, 17 | "exclude": ["node_modules", "dist"] 18 | } 19 | -------------------------------------------------------------------------------- /examples/starter-webpack/webpack.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Comment out everything MiniCssExtractPlugin related for a prod css example 3 | */ 4 | 5 | const path = require("path"); 6 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 7 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 8 | 9 | module.exports = { 10 | mode: "production", 11 | entry: path.resolve(__dirname, "src/index.tsx"), 12 | output: { 13 | path: path.resolve(__dirname, "dist"), 14 | filename: "[name]-[hash].js", 15 | }, 16 | resolve: { 17 | modules: ["node_modules"], 18 | extensions: [".ts", ".tsx", ".js", ".css"], 19 | }, 20 | performance: { 21 | hints: false, 22 | }, 23 | optimization: { 24 | splitChunks: { 25 | minSize: 10000, 26 | maxSize: 250000, 27 | }, 28 | }, 29 | module: { 30 | rules: [ 31 | { 32 | test: /\.css$/, 33 | use: [ 34 | // "style-loader", 35 | { 36 | loader: MiniCssExtractPlugin.loader, 37 | options: { 38 | esModule: false, 39 | }, 40 | }, 41 | "css-loader", 42 | "postcss-loader", 43 | ], 44 | }, 45 | { 46 | test: /\.ts(x?)$/, 47 | use: ["ts-loader"], 48 | }, 49 | ], 50 | }, 51 | plugins: [ 52 | new HtmlWebpackPlugin({ 53 | title: "Reshaped Webpack Example", 54 | template: path.resolve(__dirname, "src/index.html"), 55 | }), 56 | new MiniCssExtractPlugin(), 57 | ], 58 | devServer: { 59 | compress: true, 60 | port: 4000, 61 | }, 62 | }; 63 | --------------------------------------------------------------------------------