@rolemodel/optics 0.3.1 → 0.4.1

package/dist/scss/recipes/16six-sidebar.scss

@@ -1,10 +1,15 @@
 // 16Six Sidebar Example
-@mixin sidebar-16six-rail-global {
+.icon--rotated-135 {
+  rotate: 135deg;
+}
+
+.icon--rotated-90 {
+  rotate: 90deg;
+}
+
+@mixin sidebar-rail-global {
   .sidebar__brand {
-    svg {
-      width: 100%;
-      padding: 0 var(--op-space-small);
-    }
+    justify-content: center;
 
     .sidebar__brand-label {
       display: none;
@@ -12,86 +17,52 @@
   }
 }
 
-@mixin sidebar-16six-drawer-global {
-  .sidebar__item {
-    border-radius: var(--op-radius-large);
-    font-size: var(--op-font-small);
-  }
-}
-
 .sidebar-16six {
   @extend %sidebar-global;
 
-  --_op-sidebar-spacing: var(--op-space-x-small);
-
-  // Normal
-  --_op-sidebar-background-color: var(--op-color-primary-minus-five);
-  --_op-sidebar-text-color: var(--op-color-primary-on-minus-five);
-
-  // Active
-  --_op-sidebar-icon-background-active-color: var(--op-color-primary-minus-three);
-  --_op-sidebar-icon-text-active-color: var(--op-color-primary-on-minus-three);
-
-  // Hover
-  --_op-sidebar-icon-background-hover-color: var(--op-color-primary-minus-three);
-  --_op-sidebar-icon-text-hover-color: var(--op-color-primary-on-minus-three);
-
-  gap: var(--op-space-x-large);
+  --_op-sidebar-background-color: hsl(256deg 66% 15%);
+  --_op-sidebar-text-color: hsl(26deg 100% 95%);
+  --_op-sidebar-border-color: hsl(26deg 100% 95%);
+  --_op-sidebar-rail-width: 6.4rem;
+  --_op-sidebar-drawer-width: 22.4rem;
+  --_op-sidebar-drawer-brand-width: calc(var(--op-space-3x-large) + (2 * var(--op-space-medium)));
+  --_op-sidebar-brand-spacing: var(--op-space-medium) var(--op-space-x-small);
+  --_op-sidebar-content-item-spacing: var(--op-space-x-small);
+  --_op-sidebar-spacing: 0 0 var(--op-space-x-small);
 
   .sidebar__brand {
     display: flex;
+    margin: 0;
     color: inherit;
-    gap: var(--op-space-small);
+    gap: var(--op-space-medium);
     text-decoration: none;
 
     svg {
       width: var(--op-space-3x-large);
+      height: var(--op-space-3x-large);
     }
 
     .sidebar__brand-label {
       display: flex;
       flex-direction: column;
-      gap: var(--op-space-4x-small);
+      font-size: var(--op-font-small);
     }
   }
 
-  .sidebar__content {
-    gap: var(--op-space-x-small);
-  }
-
-  .sidebar__item {
-    .sidebar__item-icon {
-      border-radius: var(--op-radius-large);
-
-      &.sidebar__item-icon--rotated {
-        rotate: 90deg;
-      }
-    }
+  .btn {
+    &.btn--no-border {
+      background-color: transparent;
+      box-shadow: none;
+      color: var(--_op-sidebar-text-color);
 
-    &:hover,
-    &.active {
-      .sidebar__item-icon {
-        --op-mso-weight: var(--op-font-weight-medium);
+      &.btn--active,
+      &:hover {
+        background-color: hsl(256deg 23% 32%);
       }
     }
   }
 
-  // Modifiers
-  &.sidebar--drawer:not(.sidebar--responsive) {
-    @include sidebar-16six-drawer-global;
-  }
-
-  &.sidebar--drawer.sidebar--responsive {
-    @media (width > $breakpoint-medium) {
-      @include sidebar-16six-drawer-global;
-    }
-
-    @media (width <= $breakpoint-medium) {
-      @include sidebar-16six-rail-global;
-    }
-  }
-
   &.sidebar--rail {
-    @include sidebar-16six-rail-global;
+    @include sidebar-rail-global;
   }
 }

package/dist/scss/recipes/domains-sidebar.scss

@@ -1,60 +1,40 @@
 // Domains Sidebar Example
-@mixin sidebar-domains-rail-global {
-  .sidebar__brand {
-    padding: 0 var(--_op-sidebar-spacing);
-  }
-}
-
-@mixin sidebar-domains-drawer-global {
-  .sidebar__content {
-    padding: 0;
-  }
-
-  .sidebar__item {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-  }
-
-  .sidebar__section-divider {
-    margin: var(--op-space-small) 0;
+%btn-global {
+  &.btn--pill-right {
+    border-radius: 0 var(--op-radius-pill) var(--op-radius-pill) 0;
   }
 }
 
 .sidebar-domains {
   @extend %sidebar-global;
 
-  // Normal
-  --_op-sidebar-background-color: var(--op-color-background);
-  --_op-sidebar-text-color: var(--op-color-on-background);
-
-  // Active
-  --_op-sidebar-icon-background-active-color: var(--op-color-primary-plus-seven);
-  --_op-sidebar-icon-text-active-color: var(--op-color-primary-on-plus-seven);
-
-  // Hover
-  --_op-sidebar-icon-background-hover-color: var(--op-color-neutral-plus-seven);
-  --_op-sidebar-icon-text-hover-color: var(--op-color-neutral-on-plus-seven);
+  --_op-sidebar-drawer-width: 28rem;
+  --_op-sidebar-content-spacing: 0;
+  --_op-sidebar-content-item-spacing: 0;
 
-  .sidebar__brand {
-    padding: 0 var(--op-space-4x-large);
-  }
+  box-shadow: none;
 
-  // Modifiers
-  &.sidebar--drawer:not(.sidebar--responsive) {
-    @include sidebar-domains-drawer-global;
-  }
+  .btn {
+    &.btn--no-border {
+      box-shadow: none;
 
-  &.sidebar--drawer.sidebar--responsive {
-    @media (width > $breakpoint-medium) {
-      @include sidebar-domains-drawer-global;
-    }
+      &.btn--active {
+        background-color: var(--op-color-primary-plus-five);
+        color: var(--op-color-primary-on-plus-five);
+      }
 
-    @media (width <= $breakpoint-medium) {
-      @include sidebar-domains-rail-global;
+      &:hover:not(.btn--active) {
+        background-color: var(--op-color-neutral-plus-six);
+        box-shadow: none;
+        color: var(--op-color-neutral-on-plus-six);
+      }
     }
   }
 
-  &.sidebar--rail {
-    @include sidebar-domains-rail-global;
+  .sidebar__footer {
+    display: flex;
+    align-items: center;
+    padding-left: var(--op-space-large);
+    gap: var(--op-space-small);
   }
 }

package/dist/tokens/tokens.json

@@ -627,9 +627,11 @@
 		"animation": {
 			"flash": "rm-slide-in-out-flash 5s normal forwards"
 		},
-		"form": {
-			"dropdown": {
-				"arrow": "url(\"data"
+		"encoded": {
+			"images": {
+				"dropdown": {
+					"arrow": "url(\"data"
+				}
 			}
 		},
 		"space": {
@@ -670,13 +672,12 @@
 			"x-large": "8.4rem"
 		},
 		"input": {
-			"outer": {
-				"focus": "0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-four)"
-			},
 			"inner": {
-				"focus": "inset var(--op-border-all) var(--op-color-primary-minus-three)"
+				"focus": "inset 0 0 0 var(--op-border-width-large)"
 			},
-			"focus": "var(--op-input-inner-focus), var(--op-input-outer-focus)"
+			"outer": {
+				"focus": "0 0 0 var(--op-border-width-x-large)"
+			}
 		}
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolemodel/optics",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "Optics is an scss package that provides base styles and components that can be integrated and customized in a variety of projects.",
   "main": "dist/scss/optics.scss",
   "scripts": {
@@ -9,15 +9,16 @@
     "build:css": "sass src/optics.scss dist/css/optics.css --load-path=node_modules/",
     "build:scss": "rsync -a src/ dist/scss --exclude stories",
     "build:tokens": "node build_token_json --source=src/core/tokens --output=dist/tokens/tokens.json",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook -o docs-build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "lint": "npm run lint:js && npm run lint:css",
     "lint-fix": "npm run lint:js --fix && npm run lint:css --fix",
     "lint:js": "eslint 'src/stories/**/*.js'",
     "lint:css": "stylelint 'src/**/*.(scss|css)'",
     "prettier": "prettier -w .",
     "prettier-check": "prettier -c .",
-    "sanity-check": "npm run lint && npm run prettier && npm run build && npm run build-storybook && rm -rf ./dist && rm -rf ./docs-build"
+    "sanity-check": "npm run lint && npm run prettier && npm run build && npm run build-storybook && rm -rf ./dist && rm -rf ./storybook-static",
+    "generate": "node ./tools/generate.js"
   },
   "repository": {
     "type": "git",
@@ -41,36 +42,33 @@
     "@RoleModel:registry": "https://npm.pkg.github.com"
   },
   "dependencies": {
-    "modern-css-reset": "^1.4.0",
-    "tom-select": "^2.0.0"
+    "modern-css-reset": "^1.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.9",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-docs": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-interactions": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/addons": "^6.5.9",
-    "@storybook/builder-webpack4": "^6.5.9",
-    "@storybook/html": "^6.5.9",
-    "@storybook/manager-webpack4": "^6.5.9",
-    "@storybook/preset-scss": "^1.0.3",
-    "@storybook/testing-library": "^0.0.13",
-    "@storybook/theming": "^6.5.9",
-    "babel-loader": "^8.2.5",
-    "css-loader": "^5.2.7",
+    "@babel/preset-env": "^7.21.5",
+    "@storybook/addon-essentials": "^7.0.9",
+    "@storybook/addon-links": "^7.0.9",
+    "@storybook/addon-styling": "^1.0.6",
+    "@storybook/blocks": "^7.0.9",
+    "@storybook/html": "^7.0.9",
+    "@storybook/html-webpack5": "^7.0.9",
+    "@storybook/testing-library": "^0.0.14-next.2",
     "eslint": "^8.29.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-n": "^15.6.0",
     "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-storybook": "^0.6.12",
+    "generate-template-files": "^3.2.1",
     "postcss-scss": "^4.0.6",
     "prettier": "^2.8.1",
-    "sass": "^1.53.0",
-    "sass-loader": "^10.1.1",
-    "storybook-design-token": "^2.9.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.62.1",
+    "sass-loader": "^13.2.2",
+    "storybook": "^7.0.9",
+    "storybook-design-token": "^3.0.0-beta.3",
     "style-loader": "^2.0.0",
     "stylelint": "^14.16.0",
     "stylelint-config-idiomatic-order": "^9.0.0",
@@ -78,5 +76,13 @@
     "stylelint-config-standard-scss": "^6.1.0",
     "stylelint-prettier": "^2.0.0",
     "stylelint-scss": "^4.3.0"
+  },
+  "peerDependencies": {
+    "tom-select": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "tom-select": {
+      "optional": true
+    }
   }
 }

package/.storybook/ModeSwitcher.jsx

@@ -1,98 +0,0 @@
-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

@@ -1,93 +0,0 @@
-@import './src/optics.scss';
-
-@import './src/recipes/domains-sidebar.scss';
-@import './src/recipes/16six-sidebar.scss';
-
-@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);
-
-  &:hover {
-    background-color: var(--op-color-neutral-base);
-    color: var(--op-color-neutral-on-base);
-  }
-}
-
-.transition-demo--input {
-  transition: var(--op-transition-input);
-}
-
-.transition-demo--sidebar {
-  transition: var(--op-transition-sidebar);
-}
-
-.transition-demo--modal {
-  transition: var(--op-transition-modal);
-}
-
-.transition-demo--panel {
-  transition: var(--op-transition-panel);
-  transition-property: all;
-}
-
-.flash--demo {
-  position: relative;
-  top: 0;
-  right: 0;
-  animation: none;
-}
-
-.background-primary-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(--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

@@ -1,11 +0,0 @@
-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',
-    { name: 'storybook-design-token', options: { preserveCSSVars: true } },
-  ],
-  framework: '@storybook/html',
-}

package/.storybook/manager.js

@@ -1,22 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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/dist/scss/addons/rails-modal-and-panel/index.scss

@@ -1,2 +0,0 @@
-@import 'modal';
-@import 'panel';