enhancement/issue 7 open props (#38)

ProjectEvergreen · May 3, 2024 · 5b50fac · 5b50fac
1 parent b9ab8fc
commit 5b50fac
Show file tree

Hide file tree

Showing 9 changed files with 227 additions and 62 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,4 +1,5 @@
 import '../src/styles/theme.css';
+import '../src/styles/main.css';
 
 /** @type { import('@storybook/web-components').Preview } */
 const preview = {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,7 +27,8 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
-    "geist": "^1.2.0"
+    "geist": "^1.2.0",
+    "open-props": "^1.7.4"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.1",

diff --git a/patches/@greenwood+cli+0.29.0.patch b/patches/@greenwood+cli+0.29.0.patch
@@ -1,5 +1,5 @@
 diff --git a/node_modules/@greenwood/cli/src/plugins/resource/plugin-standard-css.js b/node_modules/@greenwood/cli/src/plugins/resource/plugin-standard-css.js
-index d52c723..2aedcc3 100644
+index d52c723..73e64ee 100644
 --- a/node_modules/@greenwood/cli/src/plugins/resource/plugin-standard-css.js
 +++ b/node_modules/@greenwood/cli/src/plugins/resource/plugin-standard-css.js
 @@ -5,10 +5,14 @@
@@ -60,7 +60,23 @@ index d52c723..2aedcc3 100644
        } else if (type === 'Atrule' && name !== 'import') {
          optimizedCss += `@${name} `;
        } else if (type === 'TypeSelector') {
-@@ -238,7 +272,7 @@ class StandardCssResource extends ResourceInterface {
+@@ -54,6 +88,7 @@ function bundleCss(body, url, projectDirectory) {
+           case 'nth-last-child':
+           case 'nth-of-type':
+           case 'nth-last-of-type':
++          case 'where':
+             optimizedCss += '(';
+             break;
+           default:
+@@ -163,6 +198,7 @@ function bundleCss(body, url, projectDirectory) {
+             case 'nth-last-child':
+             case 'nth-last-of-type':
+             case 'nth-of-type':
++            case 'where':
+               optimizedCss += ')';
+               break;
+             default:
+@@ -238,7 +274,7 @@ class StandardCssResource extends ResourceInterface {
 
    async optimize(url, response) {
      const body = await response.text();

diff --git a/src/pages/index.html b/src/pages/index.html
@@ -5,6 +5,7 @@
     <title>Greenwood</title>
     <script type="module" src="../components/footer/footer.js" data-gwd-opt="static"></script>
     <link rel="stylesheet" href="../styles/theme.css"></link>
+    <link rel="stylesheet" href="../styles/main.css"></link>
   </head>
 
   <body>

diff --git a/src/stories/Styleguide.mdx b/src/stories/Styleguide.mdx
@@ -131,18 +131,6 @@ This is the font intended to be used for code samples.
 
 <span class="typography typography-secondary">The quick brown fox jumped over the lazy dog.</span>
 
-## Spacing
-
-The whole website is built on an 8pt Grid, and spacing is always in multiples of 8px
-
-### `--spacing-unit`
-
-Adding a 40px spacing will look like this;
-```css
-.hero {
-  margin: calc(5 * var(--spacing-unit)); 
-}
-```
 
 ## Components
 

diff --git a/src/stories/Techstack.mdx b/src/stories/Techstack.mdx
@@ -7,6 +7,6 @@ import { Meta } from '@storybook/addon-docs';
 This project is built using the following technologies:
 
 - Framework - [Greenwood](https://github.com/ProjectEvergreen/greenwood) + [WCC](https://github.com/ProjectEvergreen/wcc) (Web Components)
+- Styling - Design Tokens provided by [**Open Props**](https://open-props.style/)
 - Testing - [Web Test Runner](https://modern-web.dev/docs/test-runner/overview/)
-- Styling - TBD
 - Linting / Formatting - TBD
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -0,0 +1,10 @@
+h1 {
+  text-align: center;
+}
+
+footer {
+  text-align: center;
+  border-radius: var(--radius-4);
+  padding: var(--size-fluid-3);
+  box-shadow: var(--shadow-4);
+}
diff --git a/src/styles/theme.css b/src/styles/theme.css
@@ -1,3 +1,7 @@
+@import "../../node_modules/open-props/src/props.borders.css";
+@import "../../node_modules/open-props/src/props.shadows.css";
+@import "../../node_modules/open-props/src/props.sizes.css";
+
 @font-face {
   font-family: "Geist-Sans";
   src: url('../../node_modules/geist/dist/fonts/geist-sans/Geist-Regular.woff2') format("truetype");
@@ -19,12 +23,10 @@
   --color-gray-background: #EDEFEC;
   --font-primary: 'Geist-Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;;
   --font-secondary: 'Geist-Mono', monospace;
-  --font-size-base: 16px;
-  --spacing-unit: 8px;
 }
 
 * {
   font-family: var(--font-primary);
-  font-size: var(--font-size-base);
+  font-size: var(--size-px-3);
   box-sizing: border-box;
 }