@rolemodel/optics 0.2.4 → 0.3.0

package/.github/release.yml

@@ -0,0 +1,53 @@
+# .github/release.yml
+
+changelog:
+  categories:
+    - title: Breaking Changes
+      labels:
+        - Breaking Change
+    - title: Base Token Changes
+      labels:
+        - Base Tokens
+    - title: Theme Token Changes
+      labels:
+        - Theme Tokens
+    - title: Base Reset Changes
+      labels:
+        - Base Reset
+    - title: Layout Changes
+      labels:
+        - Layout
+    - title: Component Changes
+      labels:
+        - Components
+    - title: Utility Changes
+      labels:
+        - Utilities
+    - title: Addon Changes
+      labels:
+        - Addons
+    - title: Dependencies
+      labels:
+        - dependencies
+    - title: Repository Changes
+      labels:
+        - Repository Change
+    - title: Documentation Changes
+      labels:
+        - documentation
+    - title: Unlabeled Changes (please categorize these)
+      labels:
+        - '*'
+      exclude:
+        labels:
+          - Breaking Change
+          - Base Tokens
+          - Theme Tokens
+          - Base Reset
+          - Layout
+          - Components
+          - Utilities
+          - Addons
+          - dependencies
+          - Repository Change
+          - documentation

package/.github/workflows/publish-storybook.yml

@@ -1,6 +1,7 @@
 name: Build and Deploy Storybook Documentation
 
 on:
+  workflow_dispatch:
   release:
     types: [created]
 
@@ -12,9 +13,16 @@ jobs:
         uses: actions/checkout@v3
         with:
           persist-credentials: false
-      - name: Install and Build 🔧
-        run: | # Install npm packages and build the Storybook files
-          npm install
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install 🔧
+        run: | # Install npm packages
+          npm ci
+      - name: Build 🔧
+        run: | # build the Storybook files
           npm run build-storybook
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@3.6.2

package/.storybook/documentation.scss

@@ -1,65 +1,93 @@
 @import './src/optics.scss';
 
-@keyframes transitionDemo {
-  from {
-    background-color: var(--rm-color-white);
-    color: var(--rm-color-black);
-  }
+@import './src/recipes/domains-sidebar.scss';
+@import './src/recipes/16six-sidebar.scss';
 
-  to {
-    background-color: var(--rm-color-primary-base);
-    color: var(--rm-color-primary-on-base);
-  }
-}
+@import 'https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap';
 
 .transition-demo {
   display: inline-block;
+  padding: var(--op-space-medium);
+  background-color: var(--op-color-primary-base);
+  color: var(--op-color-primary-on-base);
+  transition: var(--op-transition-input);
 
-  background-color: var(--rm-color-primary-base);
-  color: var(--rm-color-primary-on-base);
-
-  padding: var(--rm-space-medium);
-
-  animation-name: transitionDemo;
-  animation-duration: var(--rm-transition-input);
-  animation-iteration-count: 1;
+  &:hover {
+    background-color: var(--op-color-neutral-base);
+    color: var(--op-color-neutral-on-base);
+  }
 }
 
 .transition-demo--input {
-  animation-duration: var(--rm-transition-input);
-}
-.transition-demo--navigation {
-  animation-duration: var(--rm-transition-navigation);
+  transition: var(--op-transition-input);
 }
+
 .transition-demo--sidebar {
-  animation-duration: var(--rm-transition-sidebar);
+  transition: var(--op-transition-sidebar);
 }
+
 .transition-demo--modal {
-  animation-duration: var(--rm-transition-modal);
+  transition: var(--op-transition-modal);
 }
+
 .transition-demo--panel {
-  animation-duration: var(--rm-transition-panel);
-}
-.transition-demo--flash {
-  animation-duration: var(--rm-transition-flash);
+  transition: var(--op-transition-panel);
+  transition-property: all;
 }
 
 .flash--demo {
   position: relative;
-  animation: none;
   top: 0;
   right: 0;
+  animation: none;
 }
 
-@import './src/recipes/domains-sidebar.scss';
-@import './src/recipes/16six-sidebar.scss';
-
 .background-primary-plus-four {
-  background-color: var(--rm-color-primary-plus-four);
-  color: var(--rm-color-primary-on-plus-four);
+  background-color: var(--op-color-primary-plus-four);
+  color: var(--op-color-primary-on-plus-four);
 }
 
 .background-primary-plus-seven {
-  background-color: var(--rm-color-primary-plus-seven);
-  color: var(--rm-color-primary-on-plus-seven);
+  background-color: var(--op-color-primary-plus-seven);
+  color: var(--op-color-primary-on-plus-seven);
+}
+
+.font-family-demo--alternative {
+  --op-font-family: 'Tilt Neon', sans-serif;
+
+  font-family: var(--op-font-family);
+}
+
+.design-token-container {
+  .design-token-card {
+    table {
+      td:nth-of-type(1),
+      th:nth-of-type(1) {
+        flex-basis: 40%;
+      }
+
+      td:nth-of-type(2),
+      th:nth-of-type(2) {
+        flex-basis: 35%;
+      }
+
+      td:nth-of-type(3),
+      th:nth-of-type(3) {
+        flex-basis: 25%;
+      }
+    }
+  }
+}
+
+.input-height-tokens {
+  .design-token-container {
+    div:nth-child(2) {
+      div {
+        div:last-child {
+          margin: var(--op-space-x-large);
+          transform: rotate(90deg);
+        }
+      }
+    }
+  }
 }

package/.storybook/main.js

@@ -5,6 +5,7 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/preset-scss',
+    { name: 'storybook-design-token', options: { preserveCSSVars: true } },
   ],
   framework: '@storybook/html',
 }

package/.stylelintrc.json

@@ -9,7 +9,7 @@
   ],
   "rules": {
     "prettier/prettier": true,
-    "custom-property-pattern": ["(?<=rm-)", { "message": "CSS variables should be prefixed with rm-" }],
+    "custom-property-pattern": ["(?<=op-)", { "message": "CSS variables should be prefixed with op-" }],
     "selector-class-pattern": null
   }
 }

package/README.md

@@ -52,6 +52,21 @@ There are also a few component specific tokens that are defined in their respect
 
 There is a JSON file in `docs/token_structure.json` that lists all the current tokens in one place and shows how the names indicate organization.
 
+### Token Documentation
+
+We use the Storybook Design Token for showing design tokens in the documentation. This allows us to tag groups of tokens with a category and a presenter.
+
+[Available Presenters](https://github.com/UX-and-I/storybook-design-token#available-presenters)
+
+Add the following above a group to categorize the tokens.
+
+```css
+/**
+* @tokens Basic Colors
+* @presenter Color
+*/
+```
+
 ## License
 
 [MIT](LICENSE)