diff --git a/apps/docs/src/components/Footer/Footer.tsx b/apps/docs/src/components/Footer/Footer.tsx index 140f6d3..55702b5 100644 --- a/apps/docs/src/components/Footer/Footer.tsx +++ b/apps/docs/src/components/Footer/Footer.tsx @@ -9,7 +9,7 @@ const Footer: React.FC = () => { Copyright ©{new Date().getFullYear()} under the{' '} - + MIT license diff --git a/apps/docs/src/components/Header/Header.tsx b/apps/docs/src/components/Header/Header.tsx index c61e802..42f5245 100644 --- a/apps/docs/src/components/Header/Header.tsx +++ b/apps/docs/src/components/Header/Header.tsx @@ -37,7 +37,7 @@ const Header: React.FC = () => { - + GitHub diff --git a/apps/docs/src/components/MainNav/links.ts b/apps/docs/src/components/MainNav/links.ts index 587b821..1b058fd 100644 --- a/apps/docs/src/components/MainNav/links.ts +++ b/apps/docs/src/components/MainNav/links.ts @@ -11,7 +11,7 @@ export const mobileLinks: NavLink[] = [ { icon: faGithub, name: 'GitHub', - route: 'https://github.com/colinhemphill/strum-design', + route: 'https://github.com/colinhemphill/strum', }, ]; diff --git a/apps/docs/src/pages/components/[slug].tsx b/apps/docs/src/pages/components/[slug].tsx index 21ff68e..23f7a24 100644 --- a/apps/docs/src/pages/components/[slug].tsx +++ b/apps/docs/src/pages/components/[slug].tsx @@ -54,9 +54,9 @@ export const getStaticProps: GetStaticProps = async (context) => { const componentPathname = pathname.replace('docs.mdx', 'tsx'); const staticTypes = getStaticTypes(componentPathname)[slug] ?? null; - const docsLink = createGitHubLink(pathname.replace(/^\/.*strum-design/i, '')); + const docsLink = createGitHubLink(pathname.replace(/^\/.*strum/i, '')); const sourceLink = createGitHubLink( - componentPathname.replace(/^\/.*strum-design/i, ''), + componentPathname.replace(/^\/.*strum/i, ''), ); return { diff --git a/apps/docs/src/pages/overview/design-concepts.mdx b/apps/docs/src/pages/overview/design-concepts.mdx index 33f16dc..2dbba4f 100644 --- a/apps/docs/src/pages/overview/design-concepts.mdx +++ b/apps/docs/src/pages/overview/design-concepts.mdx @@ -5,18 +5,74 @@ ## Theming -Talk about use of dark and light themes, including default color selections. +Strum's colors and components adapt beautifully to either a light or dark color scheme. Using the StrumProvider you can either force a light/dark color scheme, or allow the user's system preferences to determine the color scheme. Atomic classes within the design system will then choose the appropriate backgrounds, borders, text colors, and accents to work with the light or dark mode. + +Although we have lots of color options you can choose from, we cannot currently take a custom accent color or theme overrides. We'll be working on this possibility in the future. ## Design tokens -I'll use this space to talk about atomic properties that you can use. Talk about general design and layout strategies, etc. +Design tokens are used to generate atomic classes that you can access for your custom layouts and components. You can always access these values with the Box primitive. ### Colors -### Spacing +Strum uses two separate color palettes, and you can choose one color from each palette to design your application. The [neutral colors](https://www.radix-ui.com/docs/colors/palette-composition/the-scales#grays) are shades of gray that designate the background colors and hover/focus states of various components. You can choose a completely neutral `gray` or subtle color variants like `slate` or `mauve`. + +You also choose an [accent color](https://www.radix-ui.com/docs/colors/palette-composition/the-scales#colors) to fit with your site's branding. + +Once you've selected these base color palettes, you'll have access to the following color tokens. -### Layouts +- Accent colors + - `accent1` to `accent12` + - `accentContrast`, either black or white depending on which accent color you've chosen + - `accentTransparent`, a slightly transparent version of your accent color +- Neutral colors + - `neutral1` to `neutral12` + - `neutralTransparent`, a slightly transparent version of your neutral color +- Context colors + - `error1` to `error12` + - `errorContrast`, pure white to contrast the error background color + - `errorTransparent`, a slightly transparent version of the error color + - `successContrast`, pure white to contrast the success background color + - `successTransparent`, a slightly transparent version of the success color + - `warningContrast`, pure black to contrast the warning background color + - `warningTransparent`, a slightly transparent version of the warning color +- CSS values + - `current`, the CSS `currentColor` value + - `inherit`, the CSS `inherit` value + - `transparent`, the CSS `transparent` value +- Plain colors + - `black`, pure black + - `white`, pure white + +### Sizing + +- Spacers + - `0` + - `1`, `0.25rem` (4px) + - `2`, `0.5rem` (8px) + - `3`, `0.75rem` (12px) + - `4`, `1rem` (16px) + - `5`, `1.5rem` (24px) + - `6`, `2rem` (32px) + - `7`, `2.5rem` (40px) + - `8`, `3rem` (48px) + - `9`, `4rem` (64px) + - `10`, `5rem` (80px) + - `11`, `6rem` (96px) + - `12`, `8rem` (128px) +- CSS values + - `auto`, CSS `auto` value + - `full`, CSS `100%` value + - `fitContent`, CSS `fit-content` value + - `maxContent`, CSS `max-content` value + - `maxContent`, CSS `min-content` value + - `100vh`, CSS `100vh` value + - `100vw`, CSS `100vw` value + - `gapX`, `2rem`, equal to the horizontal gap/padding sizes used across the app, such as containers + - `gapY`, `2rem` ## Accessibility -Talk about component and color accessibility. +Strum is highly focused on making sure that interactive and non-interactive elements are built with accessibility in mind. We often require certain props that are necessary for the component to take advantage of these accessibility features, and we sometimes choose to compromise slightly on a visual choice in favor of accessibility. For example, we've modified the Radix colors at step `9` for better color contrast. + +These features will always take priority, so please open an issue or a pull request on our [GitHub repo](https://github.com/colinhemphill/strum) if something doesn't meet an accessibility standard that we should be meeting. diff --git a/apps/docs/src/pages/overview/development.mdx b/apps/docs/src/pages/overview/development.mdx index a8882d9..1f0b894 100644 --- a/apps/docs/src/pages/overview/development.mdx +++ b/apps/docs/src/pages/overview/development.mdx @@ -5,13 +5,13 @@ ## Development guidelines -Our [GitHub source](https://github.com/colinhemphill/strum-design) is a monorepo containing this docs app and the React library. The README should include any relevant tips for running the project locally and working on it. Please feel free to +Our [GitHub source](https://github.com/colinhemphill/strum) is a monorepo containing this docs app and the React library. The README should include any relevant tips for running the project locally and working on it. Please feel free to Strum Design System is the personal component library for Colin Hemphill, a front end dev in Austin, TX. I cannot guarantee any availability to work on this project, but you are welcome to post issues or make pull requests and I'll try to get to it if I can. ```bash -git clone git@github.com:colinhemphill/strum-design.git -cd strum-design +git clone git@github.com:colinhemphill/strum.git +cd strum yarn yarn dev ``` diff --git a/apps/docs/src/utils/github.ts b/apps/docs/src/utils/github.ts index 90988c4..a2647f5 100644 --- a/apps/docs/src/utils/github.ts +++ b/apps/docs/src/utils/github.ts @@ -1,6 +1,6 @@ export const createGitHubLink = (path = '') => { const repo = `${process.env.VERCEL_GIT_REPO_OWNER ?? 'colinhemphill'}/${ - process.env.VERCEL_GIT_REPO_SLUG ?? 'strum-design' + process.env.VERCEL_GIT_REPO_SLUG ?? 'strum' }`; const branch = process.env.VERCEL_GIT_COMMIT_REF ?? 'main'; return `https://github.com/${repo}/tree/${branch}${path?.replace( diff --git a/packages/strum-react/package.json b/packages/strum-react/package.json index 0be8c49..497895a 100644 --- a/packages/strum-react/package.json +++ b/packages/strum-react/package.json @@ -5,7 +5,7 @@ "license": "MIT", "repository": { "type": "git", - "url": "https://github.com/colinhemphill/strum-design.git" + "url": "https://github.com/colinhemphill/strum.git" }, "homepage": "https://strum.design", "keywords": [ diff --git a/packages/strum-react/src/components/Box/Box.docs.mdx b/packages/strum-react/src/components/Box/Box.docs.mdx index 7c2a8bf..d781d3a 100644 --- a/packages/strum-react/src/components/Box/Box.docs.mdx +++ b/packages/strum-react/src/components/Box/Box.docs.mdx @@ -12,6 +12,39 @@ import { Box } from '@strum/react'; Hello world ``` +You can use the Box primitive to create a DOM element that applies any of the available design tokens. + +```tsx live name="box primitive examples" + + + Hello world + + + Hello world + + +``` + ## Props `React.AllHTMLAttributes` properties are supported, but not listed below for brevity. diff --git a/packages/strum-react/src/components/Button/Button.docs.mdx b/packages/strum-react/src/components/Button/Button.docs.mdx index 5606725..c2c239c 100644 --- a/packages/strum-react/src/components/Button/Button.docs.mdx +++ b/packages/strum-react/src/components/Button/Button.docs.mdx @@ -14,7 +14,7 @@ import { Button } from '@strum/react'; ## Props -If rendereding as a `