@rolemodel/optics 0.2.3

package/.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "root": true,
+  "extends": ["standard", "prettier"],
+  "rules": {
+    "no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_", // Allow unused arguments starting with an underscore
+        "varsIgnorePattern": "^_", // Allow unused variables starting with an underscore
+        "ignoreRestSiblings": true
+      }
+    ]
+  }
+}

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,40 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

package/.github/pull_request_template.md

@@ -0,0 +1,30 @@
+## Task
+
+[TR #XXX]()
+
+## Why?
+
+Why were the changes needed? What issues were the changes addressing?
+(Note: some changes may seem unrelated to the ticket, this is a great place to explain further.)
+
+## What Changed
+
+What changed in this PR?
+
+- [ ] Change 1
+- [ ] Change 2
+- [ ] ...
+
+## Sanity Check
+
+- [ ] Have you updated any usage of changed tokens?
+- [ ] Have you updated the docs with any component changes?
+- [ ] Have you run linters?
+- [ ] Have you run prettier?
+- [ ] Have you tried building the css?
+- [ ] Have you tried building storybook?
+- [ ] Do you need to update the package version?
+
+## Screenshots
+
+If any UI changes need to be shown off, please add screenshots here.

package/.github/workflows/linting.yml

@@ -0,0 +1,38 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, and run linting
+
+name: Linting CI
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+    branches: ['main']
+
+jobs:
+  build:
+    name: Run linters and check build scripts
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+          cache: 'npm'
+      - name: Install
+        run: npm install
+      - name: Run ESLint
+        run: npm run lint:js
+      - name: Run Stylelint
+        run: npm run lint:css
+      - name: Run Prettier
+        run: npm run prettier-check
+      - name: Build CSS
+        run: npm run build:css
+      - name: Build SCSS
+        run: npm run build:scss
+      - name: Build Tokens
+        run: npm run build:tokens
+      - name: Build Storybook
+        run: npm run build-storybook

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

@@ -0,0 +1,26 @@
+name: Build and Deploy Storybook Documentation
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+      - name: Install and Build 🔧
+        run: | # Install npm packages and build the Storybook files
+          npm install
+          npm run build-storybook
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@3.6.2
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages # The branch the action should deploy to.
+          FOLDER: docs-build # The folder that the build-storybook script generates files.
+          CLEAN: true # Automatically remove deleted files from the deploy branch
+          TARGET_FOLDER: docs # The folder that we serve our Storybook files from

package/.github/workflows/release-package.yml

@@ -0,0 +1,33 @@
+name: Deploy to NPM and GHP
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  build-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm run build
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+  build-gph:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+          registry-url: https://npm.pkg.github.com/
+      - run: npm ci
+      - run: npm run build
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

package/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 120,
+  "arrowParens": "always"
+}

package/.storybook/ModeSwitcher.jsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react'
+import { Button } from '@storybook/components'
+
+import { useGlobals } from '@storybook/api'
+
+// Destructuring like:
+// const [globals, setGlobals] = useGlobals()
+// or
+// setGlobals({ ...globals, themeMode: mode })
+// is not working so I had to work around it.
+
+const ModeButton = ({ children, mode, currentThemeMode, updateThemeMode }) => {
+  const hoverState = useState(false)
+  const hover = hoverState[0]
+  const setHover = hoverState[1]
+
+  const backgroundColor = () => {
+    if (hover) {
+      return 'rgba(30, 167, 253, 0.12)'
+    }
+    return currentThemeMode === mode ? 'rgba(30,167,253,0.07)' : 'transparent'
+  }
+
+  const textColor = () => {
+    if (hover) {
+      return '#1EA7FD'
+    }
+    return currentThemeMode === mode ? '#1EA7FD' : '#999'
+  }
+
+  const buttonStyles = (mode) => {
+    return {
+      borderRadius: 0,
+      padding: 8,
+      color: textColor(),
+      backgroundColor: backgroundColor(),
+    }
+  }
+
+  return (
+    <Button
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      style={buttonStyles(mode)}
+      onClick={() => updateThemeMode(mode)}
+      title={`Set canvas to ${mode} mode`}
+    >
+      {children}
+    </Button>
+  )
+}
+
+const ModeSwitcher = () => {
+  const globalState = useGlobals()
+  const globals = globalState[0]
+  const setGlobals = globalState[1]
+
+  const setCanvasDocumentThemeMode = (mode) => {
+    const frame = document.getElementById('storybook-preview-iframe')
+
+    if (frame) {
+      const frameDocument = frame.contentWindow.document
+      frameDocument.children[0].dataset.themeMode = mode
+    }
+  }
+
+  const updateThemeMode = (mode) => {
+    setCanvasDocumentThemeMode(mode)
+    globals.themeMode = mode
+    setGlobals(globals)
+  }
+
+  if (!globals.themeMode) {
+    updateThemeMode('light')
+  }
+
+  const containerStyles = () => {
+    return {
+      border: '1px solid rgb(0 0 0 / 10%)',
+      margin: 5,
+      borderRadius: '3em',
+      overflow: 'hidden',
+    }
+  }
+
+  return (
+    <div style={containerStyles()}>
+      <ModeButton mode="light" currentThemeMode={globals.themeMode} updateThemeMode={updateThemeMode}>
+        Light
+      </ModeButton>
+      <ModeButton mode="dark" currentThemeMode={globals.themeMode} updateThemeMode={updateThemeMode}>
+        Dark
+      </ModeButton>
+    </div>
+  )
+}
+
+export default ModeSwitcher

package/.storybook/documentation.scss

@@ -0,0 +1,65 @@
+@import './src/optics.scss';
+
+@keyframes transitionDemo {
+  from {
+    background-color: var(--rm-color-white);
+    color: var(--rm-color-black);
+  }
+
+  to {
+    background-color: var(--rm-color-primary-base);
+    color: var(--rm-color-primary-on-base);
+  }
+}
+
+.transition-demo {
+  display: inline-block;
+
+  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;
+}
+
+.transition-demo--input {
+  animation-duration: var(--rm-transition-input);
+}
+.transition-demo--navigation {
+  animation-duration: var(--rm-transition-navigation);
+}
+.transition-demo--sidebar {
+  animation-duration: var(--rm-transition-sidebar);
+}
+.transition-demo--modal {
+  animation-duration: var(--rm-transition-modal);
+}
+.transition-demo--panel {
+  animation-duration: var(--rm-transition-panel);
+}
+.transition-demo--flash {
+  animation-duration: var(--rm-transition-flash);
+}
+
+.flash--demo {
+  position: relative;
+  animation: none;
+  top: 0;
+  right: 0;
+}
+
+@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-primary-plus-seven {
+  background-color: var(--rm-color-primary-plus-seven);
+  color: var(--rm-color-primary-on-plus-seven);
+}

package/.storybook/main.js

@@ -0,0 +1,10 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/preset-scss',
+  ],
+  framework: '@storybook/html',
+}

package/.storybook/manager.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { addons, types } from '@storybook/addons'
+import rolemodelTheme from './rolemodelTheme'
+
+import { useGlobals } from '@storybook/api' // For some reason this is needed here. ModeSwitcher won't work without it.
+
+import ModeSwitcher from './ModeSwitcher'
+
+addons.register('rolemodel/toolbar', () => {
+  addons.add('rolemodel-toolbar-addon/toolbar', {
+    title: 'Control to switch theme mode',
+    //👇 Sets the type of UI element in Storybook
+    type: types.TOOL,
+    //👇 Shows the Toolbar UI element if either the Canvas or Docs tab is active
+    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+    render: () => <ModeSwitcher />,
+  })
+})
+
+addons.setConfig({
+  theme: rolemodelTheme,
+})

package/.storybook/preview.js

@@ -0,0 +1,12 @@
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
+
+import '!style-loader!css-loader!sass-loader!../src/optics.scss'
+import '!style-loader!css-loader!sass-loader!./documentation.scss'

package/.storybook/rolemodelTheme.js

@@ -0,0 +1,10 @@
+import { create } from '@storybook/theming'
+
+export default create({
+  base: 'light',
+  brandTitle: 'Optics, a RoleModel Design System',
+  brandUrl: 'https://docs.optics.rolemodel.design/',
+  brandImage:
+    'https://rolemodelsoftware.com/assets/rolemodel-logo--blue-5b7cee4303f5b115050586117bad8960640884812d1d51ee4b58817598c896da.svg',
+  brandTarget: '_self',
+})

package/.stylelintrc.json

@@ -0,0 +1,15 @@
+{
+  "extends": ["stylelint-config-standard-scss", "stylelint-config-idiomatic-order", "stylelint-config-prettier-scss"],
+  "plugins": ["stylelint-scss", "stylelint-prettier"],
+  "overrides": [
+    {
+      "files": ["**/*.scss"],
+      "customSyntax": "postcss-scss"
+    }
+  ],
+  "rules": {
+    "prettier/prettier": true,
+    "custom-property-pattern": ["(?<=rm-)", { "message": "CSS variables should be prefixed with rm-" }],
+    "selector-class-pattern": null
+  }
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 RoleModel Software
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,57 @@
+# Optics, a RoleModel Design System
+
+[![Linting CI](https://github.com/RoleModel/optics/actions/workflows/linting.yml/badge.svg)](https://github.com/RoleModel/optics/actions/workflows/linting.yml)
+
+Optics is an scss package that provides base styles and components that can be integrated and customized in a variety of projects.
+
+## Installation
+
+### NPM
+
+```sh
+npm install @rolemodel/optics
+```
+
+### Yarn
+
+```sh
+yarn add @rolemodel/optics
+```
+
+### Import
+
+If you are using webpack to compile, you can add this import to the top of your root level `scss` file.
+
+```scss
+@import '@rolemodel/optics';
+```
+
+If you are using a different compiler such as Dart Sass, you may need to reference the scss file directly.
+
+```scss
+@import '@rolemodel/optics/dist/scss/optics';
+```
+
+## Documentation
+
+We use [Storybook](https://storybook.js.org/docs/html/get-started/introduction) as a way to provide informative and interactive documentation.
+
+It can be found here [Optics Documentation](https://docs.optics.rolemodel.design/)
+
+## Tokens
+
+Tokens are defined in `src/core/tokens`
+
+- All core tokens are defined in `src/core/tokens/base_tokens.scss`
+- Basic color tokens are defined in `src/core/tokens/example_color_tokens.scss`
+- Color scale tokens are defined in `src/core/tokens/scale_color_tokens.scss`
+- Alert color tokens are defined in `src/core/tokens/alert_color_tokens.scss`
+- Dark mode tokens are defined in `src/core/tokens/dark_mode_tokens.scss`
+
+There are also a few component specific tokens that are defined in their respective component file, but those are not indented to be global or used outside of that file.
+
+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.
+
+## License
+
+[MIT](LICENSE)

package/build_token_json.js

@@ -0,0 +1,149 @@
+const fs = require('fs')
+const path = require('node:path')
+
+function isHyphenated(keys, length = 2) {
+  return HYPHENATED_WORDS.concat(HYPHENATED_LUMINOSITIES).includes(keys.slice(0, length).join('-'))
+}
+
+const HYPHENATED_WORDS = [
+  'z-index',
+  'neutral-variant',
+  'on-background',
+  'line-height',
+  'letter-spacing',
+  'scale-unit',
+  'input-height',
+  'width-large',
+  'width-x-large',
+  'card-outline',
+  'x-small',
+  '2x-small',
+  '3x-small',
+  '4x-small',
+  '5x-small',
+  'x-large',
+  '2x-large',
+  '3x-large',
+  '4x-large',
+  '5x-large',
+  'extra-light',
+  'extra-bold',
+  'semi-bold',
+  'dialog-backdrop',
+  'dialog-content',
+  'alert-group',
+  'on-minus-one',
+  'on-minus-two',
+  'on-minus-three',
+  'on-minus-four',
+  'on-minus-five',
+  'on-minus-six',
+  'on-minus-seven',
+  'on-minus-eight',
+  'on-minus-max',
+  'on-plus-one',
+  'on-plus-two',
+  'on-plus-three',
+  'on-plus-four',
+  'on-plus-five',
+  'on-plus-six',
+  'on-plus-seven',
+  'on-plus-eight',
+  'on-plus-max',
+  'minus-one',
+  'minus-two',
+  'minus-three',
+  'minus-four',
+  'minus-five',
+  'minus-six',
+  'minus-seven',
+  'minus-eight',
+  'minus-max',
+  'plus-one',
+  'plus-two',
+  'plus-three',
+  'plus-four',
+  'plus-five',
+  'plus-six',
+  'plus-seven',
+  'plus-eight',
+  'plus-max',
+  'on-base',
+]
+
+// This is used in the isHyphenated method so that any key of luminosity-x returns true.
+const HYPHENATED_LUMINOSITIES = [...Array(101).keys()].map((luminosity) => `luminosity-${luminosity}`)
+
+function splitKey(key) {
+  let keys = key.slice(2).split('-')
+  return keys
+}
+
+function addToJson(keys, data, value) {
+  let currentKey, remainingKeys
+
+  if (isHyphenated(keys, 2)) {
+    ;[currentKey, remainingKeys] = [keys.slice(0, 2).join('-'), keys.slice(2)]
+  } else if (isHyphenated(keys, 3)) {
+    ;[currentKey, remainingKeys] = [keys.join('-'), keys.slice(3)]
+  } else {
+    ;[currentKey, ...remainingKeys] = keys
+  }
+
+  data[currentKey] = data[currentKey] ?? {}
+
+  switch (remainingKeys.length) {
+    case 0:
+      data[currentKey] = value
+      break
+    case 1:
+      data[currentKey][remainingKeys[0]] = value
+      break
+    default:
+      data[currentKey] = addToJson(remainingKeys, data[currentKey], value)
+      break
+  }
+
+  return data
+}
+
+try {
+  const arguments = {}
+  process.argv.forEach((argument) => {
+    const values = argument.slice(2).split('=')
+    if (values.length === 2) {
+      arguments[values[0]] = values[1]
+    }
+  })
+
+  const source = arguments['source'] || 'src/core/tokens'
+  const output = arguments['output'] || './dist/tokens'
+  const outputPath = path.dirname(output)
+  const outputFile = path.basename(output)
+
+  if (!fs.existsSync(outputPath)) {
+    fs.mkdirSync(outputPath, { recursive: true })
+  }
+
+  fs.readdir(source, { withFileTypes: true }, (_errors, files) => {
+    let variables = {}
+    files
+      .filter(
+        (directoryEntry) =>
+          directoryEntry.isFile() &&
+          directoryEntry.name !== 'dark_mode_tokens.scss' &&
+          directoryEntry.name !== 'index.scss'
+      )
+      .forEach((directoryEntry) => {
+        const fileContents = fs.readFileSync(`${source}/${directoryEntry.name}`)
+        const matches = fileContents.toString().match(/^\s*--.*?(?=;)/gm)
+        matches.forEach((match) => {
+          const [key, value] = match.split(':')
+          variables = addToJson(splitKey(key.trim()), variables, value.trim())
+        })
+      })
+    fs.writeFileSync(`${outputPath}/${outputFile}`, JSON.stringify(variables, null, '\t'))
+  })
+} catch (err) {
+  console.log(err)
+}