MVP for the design concepts documentation.

colinhemphill · colinhemphill · commit 764f36c35b59 · 2022-09-11T15:58:47.000-05:00
diff --git a/apps/docs/src/components/Footer/Footer.tsx b/apps/docs/src/components/Footer/Footer.tsx
@@ -9,7 +9,7 @@ const Footer: React.FC = () => {
         <Box marginTop="2">
           <Text size="small">
             Copyright ©{new Date().getFullYear()} under the{' '}
-            <a href="https://github.com/colinhemphill/strum-design/blob/main/LICENSE.md">
+            <a href="https://github.com/colinhemphill/strum/blob/main/LICENSE.md">
               MIT license
             </a>
           </Text>
diff --git a/apps/docs/src/components/Header/Header.tsx b/apps/docs/src/components/Header/Header.tsx
@@ -37,7 +37,7 @@ const Header: React.FC = () => {
           </VisuallyHidden>
           <Stack alignItems="center" direction="horizontal">
             <Box display={{ xs: 'none', md: 'block' }}>
-              <Link href="https://github.com/colinhemphill/strum-design">
+              <Link href="https://github.com/colinhemphill/strum">
                 <VisuallyHidden focusable>GitHub</VisuallyHidden>
                 <FontAwesomeIcon icon={faGithub} size="lg" />
               </Link>
diff --git 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
@@ -54,9 +54,9 @@ export const getStaticProps: GetStaticProps<StaticProps> = 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
@@ -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 <Link href="/components/StrumProvider">StrumProvider</Link> 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 <Link href="/components/Box">Box primitive</Link>.
 
 ### 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
@@ -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 <a href="https://colinhemphill.com">Colin Hemphill</a>, 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
@@ -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
@@ -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
@@ -12,6 +12,39 @@ import { Box } from '@strum/react';
 <Box>Hello world</Box>
 ```
 
+You can use the Box primitive to create a DOM element that applies any of the available <Link href="/overview/design-concepts#design-tokens">design tokens</Link>.
+
+```tsx live name="box primitive examples"
+<Box
+  alignItems="center"
+  backgroundColor="neutral4"
+  borderRadius="large"
+  color="neutral12"
+  display="flex"
+  justifyContent="space-between"
+  padding="6"
+>
+  <Box
+    borderWidth="2"
+    borderStyle="solid"
+    borderRadius="medium"
+    color="accent11"
+    padding="2"
+  >
+    Hello world
+  </Box>
+  <Box
+    borderWidth="2"
+    borderStyle="solid"
+    borderRadius="medium"
+    color="accent11"
+    padding="2"
+  >
+    Hello world
+  </Box>
+</Box>
+```
+
 ## 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
@@ -14,7 +14,7 @@ import { Button } from '@strum/react';
 
 ## Props
 
-If rendereding as a `<button>`, the component will also pass through intrinsic props `onClick`, `onMouseEnter`, `onMouseLeave`, `disabled`, `type`, and `tabIndex`. If rendereding as an anchor, the component will pass through `href`, `rel`, and `target`.
+If rendering as a `<button>`, the component will also pass through intrinsic props `onClick`, `onMouseEnter`, `onMouseLeave`, `disabled`, `type`, and `tabIndex`. If rendering as an anchor, the component will pass through `href`, `rel`, and `target`.
 
 <PropsTable sourceLink={sourceLink} types={types} />
 
@@ -79,7 +79,7 @@ By default, buttons will render as a semantic `<button>` element. To style a lin
   <Button
     color="transparent"
     as="a"
-    href="https://github.com/colinhemphill/strum-design"
+    href="https://github.com/colinhemphill/strum"
     target="_blank"
     rel="noopener noreferrer"
   >
diff --git a/packages/strum-react/src/css/globals.css.ts b/packages/strum-react/src/css/globals.css.ts
@@ -10,7 +10,8 @@ globalStyle('a', {
   color: 'inherit',
   textDecoration: 'underline',
   textDecorationColor: vars.accent.accent9,
-  textUnderlineOffset: '0.2em',
+  textUnderlineOffset: '0.125em',
+  textDecorationThickness: '0.125em',
 });
 
 globalStyle('a:hover', {
diff --git a/packages/strum-react/src/tokens/space.ts b/packages/strum-react/src/tokens/space.ts
@@ -29,7 +29,7 @@ export const space = {
   '12': '8rem',
   auto: 'auto',
   full: '100%',
-  fit: 'fit-content',
+  fitContent: 'fit-content',
   maxContent: 'max-content',
   minContent: 'min-content',
   '100vh': '100vh',

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ export const mobileLinks: NavLink[] = [`
`11`	`11`	`{`
`12`	`12`	`icon: faGithub,`
`13`	`13`	`name: 'GitHub',`
`14`		`- route: 'https://github.com/colinhemphill/strum-design',`
	`14`	`+ route: 'https://github.com/colinhemphill/strum',`
`15`	`15`	`},`
`16`	`16`	`];`
`17`	`17`