@rolemodel/optics 0.3.0 → 0.4.0

package/dist/scss/components/sidebar.scss

@@ -1,36 +1,20 @@
 @mixin sidebar-rail-global {
   // Private API
   --__op-sidebar-width: var(--_op-sidebar-rail-width);
+  --__op-sidebar-brand-width: var(--_op-sidebar-rail-brand-width);
 
   // Elements
   .sidebar__content {
-    gap: var(--_op-sidebar-link-spacing);
-  }
-
-  .sidebar__section-title,
-  .sidebar__section-divider {
-    display: none;
-  }
-
-  .sidebar__item {
-    flex-direction: column;
-    gap: var(--op-space-2x-small);
-
-    .sidebar__item-icon {
-      padding: var(--op-space-2x-small) var(--op-space-medium);
-      transition: var(--_op-sidebar-transition);
-    }
-
-    &:hover .sidebar__item-icon {
-      background-color: var(--_op-sidebar-icon-background-hover-color);
-    }
-
-    &.active .sidebar__item-icon {
-      background-color: var(--_op-sidebar-icon-background-active-color);
-    }
+    align-items: center;
 
-    .sidebar__item-label {
-      font-size: var(--op-font-x-small);
+    > * {
+      // Can't use extend but need to get icon behavior
+      width: var(--__op-btn-height);
+      min-width: var(--__op-btn-height);
+      justify-content: center;
+      padding: 0;
+      font-size: 0;
+      gap: 0;
     }
   }
 }
@@ -38,51 +22,21 @@
 @mixin sidebar-drawer-global {
   // Private API
   --__op-sidebar-width: var(--_op-sidebar-drawer-width);
+  --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
+}
 
-  .sidebar__content {
-    padding: 0 var(--_op-sidebar-spacing);
-  }
-
-  .sidebar__section-title {
-    overflow: hidden;
-    height: var(--op-input-height-large);
-    padding: var(--op-space-small) var(--op-space-medium);
-    color: var(--_op-sidebar-text-color);
-    font-size: var(--op-font-small);
-    font-weight: var(--op-font-weight-bold);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .sidebar__section-divider {
-    border-bottom: var(--op-border-width) solid var(--_op-sidebar-text-color);
-    margin: 0 var(--_op-sidebar-spacing);
-  }
-
-  .sidebar__item {
-    height: var(--op-input-height-large);
-    flex-direction: row;
-    padding: var(--op-space-x-small) var(--op-space-medium);
-    border-radius: var(--op-radius-pill);
-    gap: var(--_op-sidebar-link-spacing);
-
-    &:hover,
-    &.active {
-      transition: var(--_op-sidebar-transition);
-    }
-
-    &:hover {
-      background-color: var(--_op-sidebar-icon-background-hover-color);
-      color: var(--_op-sidebar-icon-text-hover-color);
-
-      .sidebar__item-icon {
-        color: var(--_op-sidebar-icon-text-hover-color);
-      }
-    }
+@mixin sidebar-compact-global {
+  // Private API
+  --__op-sidebar-width: var(--_op-sidebar-compact-width);
+  --__op-sidebar-brand-width: var(--_op-sidebar-compact-brand-width);
 
-    &.active {
-      background-color: var(--_op-sidebar-icon-background-active-color);
-      color: var(--_op-sidebar-icon-text-active-color);
+  // Elements
+  .sidebar__content {
+    > * {
+      // Can't use extend but need to get icon-with-label behavior
+      flex-direction: column;
+      padding: var(--op-space-small);
+      gap: var(--op-space-3x-small);
     }
   }
 }
@@ -90,51 +44,69 @@
 %sidebar-global {
   // Public API
   // Normal
-  --_op-sidebar-background-color: var(--op-color-neutral-plus-seven);
-  --_op-sidebar-text-color: var(--op-color-neutral-on-plus-seven);
-
-  // Active
-  --_op-sidebar-icon-background-active-color: var(--op-color-neutral-plus-three);
-  --_op-sidebar-icon-text-active-color: var(--op-color-neutral-on-plus-three);
-
-  // Hover
-  --_op-sidebar-icon-background-hover-color: var(--op-color-neutral-plus-four);
-  --_op-sidebar-icon-text-hover-color: var(--op-color-neutral-on-plus-four);
+  --_op-sidebar-background-color: var(--op-color-neutral-plus-eight);
+  --_op-sidebar-text-color: var(--op-color-neutral-on-plus-eight);
+  --_op-sidebar-border-color: var(--op-color-neutral-plus-four);
 
   // Width
   --_op-sidebar-rail-width: 8.8rem;
-  --_op-sidebar-drawer-width: 25rem;
+  --_op-sidebar-compact-width: 16.9rem;
+  --_op-sidebar-drawer-width: 21.6rem;
+  --_op-sidebar-rail-brand-width: 7.728rem;
+  --_op-sidebar-compact-brand-width: 9.8rem;
+  --_op-sidebar-drawer-brand-width: 9.8rem;
 
   // Spacing
-  --_op-sidebar-spacing: var(--op-space-medium);
-  --_op-sidebar-link-spacing: var(--op-space-large);
+  --_op-sidebar-spacing: calc(var(--op-space-2x-large) + var(--op-space-2x-small));
+  --_op-sidebar-brand-spacing: var(--op-space-medium);
+  --_op-sidebar-content-spacing: var(--op-space-x-small);
+  --_op-sidebar-content-item-spacing: var(--op-space-2x-small);
 
   // Animation
   --_op-sidebar-transition: var(--op-transition-sidebar);
 
   // Private API
   --__op-sidebar-width: var(--_op-sidebar-drawer-width);
+  --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
 
   display: flex;
   width: var(--__op-sidebar-width);
+  min-width: var(--__op-sidebar-width);
   flex-direction: column;
-  padding: var(--_op-sidebar-spacing) 0;
   background-color: var(--_op-sidebar-background-color);
+  box-shadow: var(--op-border-right) var(--_op-sidebar-border-color);
   color: var(--_op-sidebar-text-color);
-  gap: var(--_op-sidebar-spacing);
   overflow-y: auto;
   transition: var(--_op-sidebar-transition);
 
   // Elements
   .sidebar__brand {
-    display: block;
-    padding: 0 var(--_op-sidebar-spacing);
+    height: var(--__op-sidebar-brand-width);
+    padding: var(--_op-sidebar-brand-spacing);
+    margin: 0 auto;
+
+    img {
+      height: 100%;
+    }
   }
 
   .sidebar__content {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
+    padding: 0 var(--_op-sidebar-content-spacing);
+    gap: var(--_op-sidebar-content-item-spacing);
+
+    > * {
+      justify-content: flex-start;
+
+      .material-symbols-outlined {
+        /* stylelint-disable scss/at-extend-no-missing-placeholder */
+        @extend .icon--large;
+        @extend .icon--weight-bold;
+        /* stylelint-enable scss/at-extend-no-missing-placeholder */
+      }
+    }
 
     &.sidebar__content--start {
       justify-content: start;
@@ -149,61 +121,34 @@
     }
   }
 
-  .sidebar__item {
-    display: flex;
-    align-items: center;
-    color: var(--_op-sidebar-text-color);
-    cursor: pointer;
-    text-align: center;
-    text-decoration: none;
-
-    &:visited {
-      color: var(--_op-sidebar-text-color);
-    }
-
-    &:hover,
-    &.active {
-      .sidebar__item-icon {
-        --op-mso-weight: var(--op-font-weight-bold);
-      }
-    }
-
-    &:hover .sidebar__item-icon {
-      color: var(--_op-sidebar-text-color);
-    }
-
-    .sidebar__item-icon {
-      /* stylelint-disable scss/at-extend-no-missing-placeholder */
-      @extend .icon--x-large;
-      /* stylelint-enable scss/at-extend-no-missing-placeholder */
+  // Modifiers
+  &.sidebar--padded {
+    padding: var(--_op-sidebar-spacing) 0;
+  }
 
-      --op-mso-weight: var(--op-font-weight-medium);
+  // Drawer Modifier
+  &.sidebar--drawer:not(.sidebar--responsive) {
+    @include sidebar-drawer-global;
+  }
 
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: var(--op-radius-pill);
+  &.sidebar--drawer.sidebar--responsive {
+    @media (width > $breakpoint-medium) {
+      @include sidebar-drawer-global;
     }
 
-    .sidebar__item-label {
-      overflow: hidden;
-      max-width: 90%;
-      font-weight: var(--op-font-weight-medium);
-      letter-spacing: var(--op-letter-spacing-navigation);
-      line-height: var(--op-line-height-dense);
-      text-overflow: ellipsis;
-      white-space: nowrap;
+    @media (width <= $breakpoint-medium) {
+      @include sidebar-rail-global;
     }
   }
 
-  // Modifiers
-  &.sidebar--drawer:not(.sidebar--responsive) {
-    @include sidebar-drawer-global;
+  // Compact Modifier
+  &.sidebar--compact:not(.sidebar--responsive) {
+    @include sidebar-compact-global;
   }
 
-  &.sidebar--drawer.sidebar--responsive {
+  &.sidebar--compact.sidebar--responsive {
     @media (width > $breakpoint-medium) {
-      @include sidebar-drawer-global;
+      @include sidebar-compact-global;
     }
 
     @media (width <= $breakpoint-medium) {
@@ -214,6 +159,10 @@
   &.sidebar--rail {
     @include sidebar-rail-global;
   }
+
+  &.sidebar--compact {
+    @include sidebar-compact-global;
+  }
 }
 
 .sidebar {
@@ -224,32 +173,7 @@
 .sidebar-primary {
   @extend %sidebar-global;
 
-  // Normal
-  --_op-sidebar-background-color: var(--op-color-primary-plus-seven);
-  --_op-sidebar-text-color: var(--op-color-primary-on-plus-seven);
-
-  // Active
-  --_op-sidebar-icon-background-active-color: var(--op-color-primary-plus-three);
-  --_op-sidebar-icon-text-active-color: var(--op-color-primary-on-plus-three);
-
-  // Hover
-  --_op-sidebar-icon-background-hover-color: var(--op-color-primary-plus-four);
-  --_op-sidebar-icon-text-hover-color: var(--op-color-primary-on-plus-four);
-}
-
-// Subtle Primary
-.sidebar-subtle-primary {
-  @extend %sidebar-global;
-
-  // Normal
-  --_op-sidebar-background-color: var(--op-color-primary-plus-max);
-  --_op-sidebar-text-color: var(--op-color-primary-on-plus-max);
-
-  // Active
-  --_op-sidebar-icon-background-active-color: var(--op-color-primary-plus-three);
-  --_op-sidebar-icon-text-active-color: var(--op-color-primary-on-plus-three);
-
-  // Hover
-  --_op-sidebar-icon-background-hover-color: var(--op-color-primary-plus-four);
-  --_op-sidebar-icon-text-hover-color: var(--op-color-primary-on-plus-four);
+  --_op-sidebar-background-color: var(--op-color-primary-plus-six);
+  --_op-sidebar-text-color: var(--op-color-primary-on-plus-six);
+  --_op-sidebar-border-color: var(--op-color-primary-plus-four);
 }

package/dist/scss/components/table.scss

@@ -2,14 +2,14 @@
 
 %table-global {
   // Public API
-  // Cells (for padding, the appropriate variable is used when using the density modifiers)
-  --_op-table-cell-padding-default: var(--op-space-small) var(--op-space-x-small);
-  --_op-table-cell-padding-comfortable: var(--op-space-medium) var(--op-space-small);
-  --_op-table-cell-padding-compact: var(--op-space-x-small) var(--op-space-2x-small);
+  // Cells (for height, the appropriate variable is used when using the density modifiers)
+  --_op-table-cell-height-default: calc(var(--op-space-scale-unit) * 4.4);
+  --_op-table-cell-height-comfortable: calc(var(--op-space-scale-unit) * 6.4);
+  --_op-table-cell-height-compact: calc(var(--op-space-scale-unit) * 3.4);
 
   // Private API
   // These allow for overriding specific padding versions easier.
-  --__op-table-cell-padding: var(--_op-table-cell-padding-default);
+  --__op-table-cell-height: var(--_op-table-cell-height-default);
 
   width: 100%;
   border-radius: var(--op-radius-medium);
@@ -19,25 +19,32 @@
   table-layout: auto;
 
   thead {
-    background-color: var(--op-color-neutral-plus-four);
-    color: var(--op-color-neutral-on-plus-four);
+    background-color: var(--op-color-neutral-plus-eight);
+    box-shadow: inset var(--op-border-top) var(--op-border-color);
+    color: var(--op-color-neutral-on-plus-eight);
+
+    // This Currently does not work in Firefox since it does not support :has yet, but fails gracefully.
+    &:has(th input[type='checkbox']:checked) {
+      background-color: var(--op-color-primary-plus-seven);
+      color: var(--op-color-primary-on-plus-seven);
+    }
   }
 
   th {
-    font-weight: var(--op-font-weight-normal);
+    font-weight: var(--op-font-weight-semi-bold);
     text-align: left;
-    text-transform: uppercase;
   }
 
   tbody,
   tfoot {
-    background-color: var(--op-color-background);
-    color: var(--op-color-on-background);
+    background-color: var(--op-color-neutral-plus-max);
+    color: var(--op-color-neutral-on-plus-max);
   }
 
   th,
   td {
-    padding: var(--__op-table-cell-padding);
+    height: var(--__op-table-cell-height);
+    padding: var(--op-space-2x-small) var(--op-space-small);
     font-size: var(--op-font-small);
   }
 
@@ -60,15 +67,15 @@
 
   // Table Density Modifiers
   &.table--default-density {
-    --__op-table-cell-padding: var(--_op-table-cell-padding-default);
+    --__op-table-cell-height: var(--_op-table-cell-height-default);
   }
 
   &.table--comfortable-density {
-    --__op-table-cell-padding: var(--_op-table-cell-padding-comfortable);
+    --__op-table-cell-height: var(--_op-table-cell-height-comfortable);
   }
 
   &.table--compact-density {
-    --__op-table-cell-padding: var(--_op-table-cell-padding-compact);
+    --__op-table-cell-height: var(--_op-table-cell-height-compact);
   }
 
   // Striped Modifiers

package/dist/scss/core/tokens/base_tokens.scss

@@ -194,8 +194,8 @@
   /**
   * @tokens Encoded Images
   */
-  --op-form-dropdown-arrow-width: 1rem; // No way to string interpolate
-  --op-form-dropdown-arrow: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 7' version='1.1' xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cg transform='matrix(0.983953,0,0,1.00934,-9.22679,-3.65885)'%3E%3Cpath fill='%23d1d1d1' d='M9.37727 3.625l5.08154 6.93523L19.54036 3.625'/%3E%3C/g%3E%3C/svg%3E%0A");
+  --op-encoded-images-dropdown-arrow-width: var(--op-space-scale-unit); // No way to string interpolate
+  --op-encoded-images-dropdown-arrow: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 7' version='1.1' xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cg transform='matrix(0.983953,0,0,1.00934,-9.22679,-3.65885)'%3E%3Cpath fill='%23d1d1d1' d='M9.37727 3.625l5.08154 6.93523L19.54036 3.625'/%3E%3C/g%3E%3C/svg%3E%0A");
 }
 
 @mixin fonts {
@@ -268,9 +268,14 @@
   * @tokens Input Focus
   * @presenter Shadow
   */
-  --op-input-outer-focus: 0 0 0 var(--op-border-width-large) var(--op-color-primary-plus-four);
-  --op-input-inner-focus: inset var(--op-border-all) var(--op-color-primary-minus-three);
-  --op-input-focus: var(--op-input-inner-focus), var(--op-input-outer-focus);
+  --op-input-inner-focus: inset 0 0 0 var(--op-border-width-large);
+  --op-input-outer-focus: 0 0 0 var(--op-border-width-x-large);
+  --op-input-focus-primary: var(--op-input-inner-focus) var(--op-color-primary-plus-two),
+    var(--op-input-outer-focus) var(--op-color-primary-plus-five);
+  --op-input-focus-danger: var(--op-input-inner-focus) var(--op-color-alerts-danger-plus-two),
+    var(--op-input-outer-focus) var(--op-color-alerts-danger-plus-five);
+  --op-input-focus-warning: var(--op-input-inner-focus) var(--op-color-alerts-warning-plus-two),
+    var(--op-input-outer-focus) var(--op-color-alerts-warning-plus-five);
 }
 
 // We use SCSS variables outside the root since support for custom properties / css variables

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.0",
+  "version": "0.4.0",
   "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",
@@ -45,32 +46,30 @@
     "tom-select": "^2.0.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",

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