Fix documentation issues (#289)

This PR fixes a few issues with the documentation and updates dependencies.

Author: Jeremy-Walton

.eslintrc.json

@@ -0,0 +1 @@
+22.14.0

.node-version

@@ -1,3 +1,4 @@
 # Tools
 tools/templates
 .yarn/*
+optics-design-system.code-workspace

.prettierignore

@@ -16,6 +16,9 @@
   .sbdocs.sbdocs-toc--custom {
     width: 15rem;
     min-width: 15rem;
+    background-color: var(--op-color-background);
+    color: var(--op-color-on-background);
+    color-scheme: light;
 
     > nav {
       width: 15rem;
@@ -170,6 +173,7 @@
   align-items: center;
   justify-content: space-between;
   padding: var(--op-space-large);
+  color-scheme: light;
   gap: var(--op-space-large);
 
   .card__info {

.storybook/preview.css

@@ -0,0 +1,27 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import { defineConfig } from 'eslint/config'
+
+import eslintConfigPrettier from 'eslint-config-prettier/flat'
+import storybook from 'eslint-plugin-storybook'
+
+export default defineConfig([
+  {
+    files: ['**/*.{js,mjs,cjs}'],
+    plugins: { js },
+    extends: ['js/recommended'],
+    languageOptions: { globals: globals.browser },
+    rules: {
+      'no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_', // Allow unused arguments starting with an underscore
+          varsIgnorePattern: '^_', // Allow unused variables starting with an underscore
+          ignoreRestSiblings: true,
+        },
+      ],
+    },
+  },
+  eslintConfigPrettier,
+  ...storybook.configs['flat/recommended'],
+])

eslint.config.mjs

@@ -7,12 +7,23 @@
   "settings": {
     "prettier.configPath": ".prettierrc.json",
     "stylelint.configFile": ".stylelintrc.json",
-    "stylelint.validate": ["css"],
+    "stylelint.validate": [
+      "css"
+    ],
     "editor.codeActionsOnSave": {
       "source.fixAll.stylelint": "always",
     },
     "editor.formatOnSave": true,
-    "cSpell.words": ["esbenp", "graphviz", "subline", "tintinweb", "unifiedjs"],
+    "cSpell.words": [
+      "esbenp",
+      "graphviz",
+      "subline",
+      "tintinweb",
+      "unifiedjs"
+    ],
+    "[css]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode",
+    },
   },
   "extensions": {
     "recommendations": [

optics-design-system.code-workspace

@@ -46,29 +46,27 @@
     "modern-css-reset": "^1.4.0"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.23.9",
-    "@storybook/addon-docs": "^9.1.0",
-    "@storybook/html-vite": "^9.1.0",
-    "cssnano": "^7.0.6",
-    "eslint": "^8.45.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-n": "^16.0.1",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-storybook": "^9.1.0",
+    "@babel/preset-env": "^7.28.3",
+    "@eslint/js": "^9.34.0",
+    "@storybook/addon-docs": "^9.1.4",
+    "@storybook/html-vite": "^9.1.4",
+    "cssnano": "^7.1.1",
+    "eslint": "^9.34.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-storybook": "^9.1.4",
     "generate-template-files": "^3.2.1",
-    "postcss": "^8.4.38",
-    "postcss-cli": "^11.0.0",
-    "postcss-import": "^16.1.0",
-    "prettier": "^3.0.0",
-    "storybook": "^9.1.0",
+    "globals": "^16.3.0",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "postcss-import": "^16.1.1",
+    "prettier": "^3.6.2",
+    "storybook": "^9.1.4",
     "storybook-design-token": "^4.1.0",
-    "style-loader": "^3.3.3",
-    "stylelint": "^16.2.1",
+    "style-loader": "^4.0.0",
+    "stylelint": "^16.23.1",
     "stylelint-config-idiomatic-order": "^10.0.0",
-    "stylelint-prettier": "^5.0.0",
-    "vite": "^5.4.14"
+    "stylelint-prettier": "^5.0.3",
+    "vite": "^7.1.4"
   },
   "peerDependencies": {
     "tom-select": "^2.0.0"

package.json

@@ -297,17 +297,23 @@
   */
   --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),
+  --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-neutral: var(--op-input-inner-focus) var(--op-color-neutral-plus-two),
+  --op-input-focus-neutral:
+    var(--op-input-inner-focus) var(--op-color-neutral-plus-two),
     var(--op-input-outer-focus) var(--op-color-neutral-plus-five);
-  --op-input-focus-danger: var(--op-input-inner-focus) var(--op-color-alerts-danger-plus-two),
+  --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),
+  --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);
-  --op-input-focus-info: var(--op-input-inner-focus) var(--op-color-alerts-info-plus-two),
+  --op-input-focus-info:
+    var(--op-input-inner-focus) var(--op-color-alerts-info-plus-two),
     var(--op-input-outer-focus) var(--op-color-alerts-info-plus-five);
-  --op-input-focus-notice: var(--op-input-inner-focus) var(--op-color-alerts-notice-plus-two),
+  --op-input-focus-notice:
+    var(--op-input-inner-focus) var(--op-color-alerts-notice-plus-two),
     var(--op-input-outer-focus) var(--op-color-alerts-notice-plus-five);
 }
 

src/core/tokens/base_tokens.css

@@ -25,7 +25,7 @@ import packageData from '../../../package.json'
   <div className="card card--company card--shadow-x-small">
     <div className="card__info">
       <img className="card__info-logo" src="./public/rms-logo.svg" alt="RoleModel Software Logo" />
-      <p>Optics, a RoleModel Software innovation, is a product of our mission to deliver exceptional digital products.</p>
+      <span>Optics, a RoleModel Software innovation, is a product of our mission to deliver exceptional digital products.</span>
     </div>
     <a className="btn sb-unstyled" href="https://rolemodelsoftware.com/" target="_blank">
       <span>Learn About RoleModel Software</span>
@@ -36,10 +36,10 @@ import packageData from '../../../package.json'
   <div className="card card--company card--shadow-x-small">
     <div className="card__info">
       <img className="card__info-logo" src="./public/optics-logo.svg" alt="Optics Logo" />
-      <p>
+      <span>
         Optics embodies the RoleModel ethos of deep collaboration, uniting our team's diverse expertise with the shared
         goal of crafting excellent design solutions and our commitment to Character, Collaboration, and Craftsmanship.
-      </p>
+      </span>
     </div>
     <a className="btn sb-unstyled" href="https://optics.rolemodel.design/" target="_blank">
       <span>Learn About The Vision Behind Optics</span>