@rolemodel/optics 0.5.1 → 1.1.0

package/dist/scss/components/confirm-dialog.scss

@@ -42,7 +42,7 @@
   width: var(--_op-confirm-dialog-width);
   border-radius: var(--op-radius-medium);
   background-color: var(--op-color-background);
-  box-shadow: var(--op-border-all) var(--op-border-color);
+  box-shadow: var(--op-border-all) var(--op-color-border);
   color: var(--op-color-on-background);
   contain: paint;
   font-size: var(--op-font-medium);
@@ -63,7 +63,7 @@
   }
 
   .confirm-dialog__body {
-    box-shadow: var(--op-border-all) var(--op-border-color);
+    box-shadow: var(--op-border-all) var(--op-color-border);
   }
 
   .confirm-dialog__footer {

package/dist/scss/components/divider.scss

@@ -12,7 +12,7 @@
   --__op-divider-height: var(--_op-divider-height-small);
   --__op-divider-padding: 0;
 
-  background-color: var(--op-border-color);
+  background-color: var(--op-color-border);
 
   // Size Modifiers
   &.divider--small {

package/dist/scss/components/form.scss

@@ -139,6 +139,7 @@
 
   &[type='color'] {
     padding: var(--op-space-2x-small);
+    cursor: pointer;
 
     &::-webkit-color-swatch-wrapper {
       padding: 0;
@@ -159,21 +160,33 @@
     padding-block: 0;
 
     &::file-selector-button {
-      @extend %btn-global;
-
-      --__op-btn-height: var(--_op-btn-height-small);
-      --__op-btn-font-size: var(--_op-btn-font-small);
-      --__op-btn-padding: var(--_op-btn-padding-small);
-
+      --__op-btn-base-height: var(--op-input-height-small);
+      --__op-btn-height: var(--__op-btn-base-height);
+
+      display: inline-flex;
+      min-height: var(--__op-btn-height);
+      align-items: center;
+      justify-content: center;
+      padding: 0 var(--op-space-x-small);
       border: none;
+      border-radius: var(--op-radius-medium);
+      appearance: none;
       background-color: var(--op-color-neutral-plus-eight);
       box-shadow: inset var(--op-border-all) var(--op-color-neutral-plus-four);
       color: var(--op-color-neutral-on-plus-eight);
+      cursor: pointer;
+      font-size: var(--op-font-x-small);
+      font-weight: var(--op-font-weight-normal);
+      gap: var(--op-space-x-small);
       margin-block: calc((var(--__op-form-control-height) / 2) - (var(--__op-btn-height) / 2));
+      text-align: center;
+      text-decoration: none;
+      transition: var(--op-transition-input);
+      white-space: nowrap;
     }
 
     &.form-control--small::file-selector-button {
-      --__op-btn-height: calc(var(--_op-btn-height-small) - var(--op-space-x-small));
+      --__op-btn-height: calc(var(--__op-btn-base-height) - var(--op-space-x-small));
     }
   }
 

package/dist/scss/components/icon.scss

@@ -3,7 +3,7 @@
 // from Googles CDN like we do for our other fonts
 // https://developers.google.com/fonts/docs/material_symbols#variable_font_with_google_fonts
 
-@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200';
+@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block';
 
 .material-symbols-outlined,
 .material-symbols {

package/dist/scss/components/modal.scss

@@ -46,7 +46,7 @@
   width: var(--_op-modal-width);
   border-radius: var(--op-radius-medium);
   background-color: var(--op-color-background);
-  box-shadow: var(--op-border-all) var(--op-border-color);
+  box-shadow: var(--op-border-all) var(--op-color-border);
   color: var(--op-color-on-background);
   contain: paint;
   font-size: var(--op-font-medium);
@@ -71,7 +71,7 @@
 
   .modal__body {
     max-height: var(--_op-modal-max-height);
-    box-shadow: var(--op-border-all) var(--op-border-color);
+    box-shadow: var(--op-border-all) var(--op-color-border);
     overflow-y: auto;
   }
 

package/dist/scss/components/side_panel.scss

@@ -17,11 +17,11 @@
 
   // Modifiers
   &.side-panel--border-left {
-    box-shadow: var(--op-border-left) var(--op-border-color);
+    box-shadow: var(--op-border-left) var(--op-color-border);
   }
 
   &.side-panel--border-right {
-    box-shadow: var(--op-border-right) var(--op-border-color);
+    box-shadow: var(--op-border-right) var(--op-color-border);
   }
 
   &.side-panel--border-left.side-panel--border-right {

package/dist/scss/components/sidebar.scss

@@ -69,6 +69,7 @@
   --__op-sidebar-width: var(--_op-sidebar-drawer-width);
   --__op-sidebar-brand-width: var(--_op-sidebar-drawer-brand-width);
 
+  z-index: var(--op-z-index-sidebar);
   display: flex;
   width: var(--__op-sidebar-width);
   min-width: var(--__op-sidebar-width);

package/dist/scss/components/table.scss

@@ -12,13 +12,13 @@
   width: 100%;
   border-radius: var(--op-radius-medium);
   border-collapse: collapse;
-  box-shadow: var(--op-border-all) var(--op-border-color);
+  box-shadow: var(--op-border-all) var(--op-color-border);
   contain: paint;
   table-layout: auto;
 
   thead {
     background-color: var(--op-color-neutral-plus-eight);
-    box-shadow: inset var(--op-border-top) var(--op-border-color);
+    box-shadow: inset var(--op-border-top) var(--op-color-border);
     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.
@@ -47,11 +47,11 @@
   }
 
   tr:not(:last-child) {
-    box-shadow: inset var(--op-border-top) var(--op-border-color);
+    box-shadow: inset var(--op-border-top) var(--op-color-border);
   }
 
   tfoot tr {
-    box-shadow: var(--op-border-top) var(--op-border-color);
+    box-shadow: var(--op-border-top) var(--op-color-border);
   }
 
   // Layout Modifiers

package/dist/scss/components/tooltip.scss

@@ -1,3 +1,5 @@
+// Inspired by https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/
+
 %tooltip-global {
   // Public API
   --_op-tooltip-max-width: calc(50 * var(--op-size-unit)); // 200px

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

@@ -1,5 +1,14 @@
-@import 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap';
-@import 'https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap';
+@import 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap';
+
+// Noto Sans supports:
+// font-weight: {anything between 100 and 900}
+// font-stretch: {anything between 62.5% and 100%}
+// font-style: {normal or italic}
+
+// Noto Serif supports:
+// font-weight: {anything between 100 and 900}
+// font-stretch: {anything between 62.5% and 100%}
+// font-style: {normal or italic}
 
 // Using Mixins allows us to include them at a component level
 // as needed and override them.
@@ -128,11 +137,11 @@ $breakpoint-x-large: 1440px; // medium laptop
   * @tokens Border Color
   * @presenter Color
   */
-  --op-border-color: var(--op-color-neutral-plus-five);
+  --op-color-border: var(--op-color-neutral-plus-five);
 }
 
 @mixin box-shadows {
-  // E.G. box-shadow: var(--op-border-top) var(--op-border-color);
+  // E.G. box-shadow: var(--op-border-top) var(--op-color-border);
 
   /**
   * @tokens Border Shadow
@@ -144,8 +153,8 @@ $breakpoint-x-large: 1440px; // medium laptop
   --op-border-right: var(--op-border-width) 0 0 0;
   --op-border-bottom: 0 var(--op-border-width) 0 0;
   --op-border-left: calc(-1 * var(--op-border-width)) 0 0 0;
-  --op-border-y: var(--op-border-top) var(--op-border-color), var(--op-border-bottom) var(--op-border-color);
-  --op-border-x: var(--op-border-left) var(--op-border-color), var(--op-border-right) var(--op-border-color);
+  --op-border-y: var(--op-border-top) var(--op-color-border), var(--op-border-bottom) var(--op-color-border);
+  --op-border-x: var(--op-border-left) var(--op-color-border), var(--op-border-right) var(--op-color-border);
 }
 
 @mixin font-scales {
@@ -240,7 +249,8 @@ $breakpoint-x-large: 1440px; // medium laptop
   * @tokens Font Family
   * @presenter FontFamily
   */
-  --op-font-family: 'Noto Sans', 'Noto Serif', sans-serif;
+  --op-font-family: 'Noto Sans', sans-serif;
+  --op-font-family-alt: 'Noto Serif', serif;
 }
 
 @mixin spacing-scales {
@@ -287,7 +297,7 @@ $breakpoint-x-large: 1440px; // medium laptop
   */
   --op-z-index-header: 500;
   --op-z-index-footer: 500;
-  --op-z-index-drawer: 700;
+  --op-z-index-sidebar: 700;
   --op-z-index-dialog: 800;
   --op-z-index-dialog-backdrop: 801;
   --op-z-index-dialog-content: 802;

package/dist/scss/core/tokens/dark_mode_tokens.scss

@@ -447,6 +447,9 @@
 }
 
 @mixin encoded-images {
+  /**
+  * @tokens Encoded Images
+  */
   --op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==');
 }
 

package/dist/scss/recipes/aligned-header.scss

@@ -0,0 +1,20 @@
+%aligned-header {
+  // Public API (allowed to be overridden)
+  --_op-line-height: var(--op-line-height-base);
+  --_op-font-size: var(--op-font-4x-large);
+
+  font-size: var(--_op-font-size);
+  font-weight: var(--op-font-weight-semi-bold);
+  line-height: var(--_op-line-height);
+
+  .aligned-header__centered-suffix {
+    display: inline-flex;
+    height: calc(var(--_op-line-height) * var(--_op-font-size));
+    align-items: center;
+    vertical-align: top;
+  }
+}
+
+.aligned-header {
+  @extend %aligned-header;
+}

package/dist/tokens/tokens.json

@@ -593,6 +593,7 @@
 					}
 				}
 			},
+			"border": "var(--op-color-neutral-plus-five)",
 			"background": "var(--op-color-neutral-plus-eight)",
 			"on-background": "var(--op-color-neutral-on-plus-eight)"
 		},
@@ -623,15 +624,14 @@
 			"width": "1px",
 			"width-large": "2px",
 			"width-x-large": "4px",
-			"color": "var(--op-color-neutral-plus-five)",
 			"none": "0 0 0 0",
 			"all": "0 0 0 var(--op-border-width)",
 			"top": "0 calc(-1 * var(--op-border-width)) 0 0",
 			"right": "var(--op-border-width) 0 0 0",
 			"bottom": "0 var(--op-border-width) 0 0",
 			"left": "calc(-1 * var(--op-border-width)) 0 0 0",
-			"y": "var(--op-border-top) var(--op-border-color), var(--op-border-bottom) var(--op-border-color)",
-			"x": "var(--op-border-left) var(--op-border-color), var(--op-border-right) var(--op-border-color)"
+			"y": "var(--op-border-top) var(--op-color-border), var(--op-border-bottom) var(--op-color-border)",
+			"x": "var(--op-border-left) var(--op-color-border), var(--op-border-right) var(--op-color-border)"
 		},
 		"font": {
 			"scale-unit": "1rem",
@@ -659,7 +659,7 @@
 				"extra-bold": "800",
 				"black": "900"
 			},
-			"family": "'Noto Sans', 'Noto Serif', sans-serif"
+			"family": "'Noto Sans', sans-serif"
 		},
 		"line-height": {
 			"none": "0",
@@ -719,7 +719,7 @@
 		"z-index": {
 			"header": "500",
 			"footer": "500",
-			"drawer": "700",
+			"sidebar": "700",
 			"dialog": "800",
 			"dialog-backdrop": "801",
 			"dialog-content": "802",

package/package.json

@@ -1,23 +1,24 @@
 {
   "name": "@rolemodel/optics",
-  "version": "0.5.1",
+  "version": "1.1.0",
+  "packageManager": "yarn@4.2.2",
   "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": {
     "test": "exit 0",
-    "build": "npm run build:css && npm run build:scss && npm run build:tokens",
+    "build": "yarn build:css && yarn build:scss && yarn build:tokens",
     "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": "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",
+    "storybook": "storybook dev -p 6006 --docs",
+    "build-storybook": "storybook build --docs",
+    "lint": "yarn lint:js && yarn lint:css",
+    "lint-fix": "yarn lint:js --fix && yarn 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 ./storybook-static",
+    "sanity-check": "yarn lint && yarn prettier && yarn build && yarn build-storybook && rm -rf ./dist && rm -rf ./storybook-static",
     "generate": "node ./tools/generate.js"
   },
   "repository": {
@@ -45,38 +46,38 @@
     "modern-css-reset": "^1.4.0"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.21.5",
-    "@storybook/addon-essentials": "^7.1.0",
-    "@storybook/addon-links": "^7.1.0",
-    "@storybook/addon-mdx-gfm": "^7.1.0",
-    "@storybook/addon-styling": "^1.3.4",
-    "@storybook/blocks": "^7.1.0",
-    "@storybook/html": "^7.1.0",
-    "@storybook/html-webpack5": "^7.1.0",
-    "@storybook/testing-library": "^0.2.0",
+    "@babel/preset-env": "^7.23.9",
+    "@storybook/addon-essentials": "^8.1.3",
+    "@storybook/blocks": "^8.1.3",
+    "@storybook/html": "^8.1.3",
+    "@storybook/html-vite": "^8.1.3",
+    "@storybook/manager-api": "^8.1.3",
+    "@storybook/preview-api": "^8.1.3",
+    "@storybook/test": "^8.1.3",
+    "@storybook/theming": "^8.1.3",
     "eslint": "^8.45.0",
-    "eslint-config-prettier": "^8.8.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": "^0.6.13",
     "generate-template-files": "^3.2.1",
-    "postcss-scss": "^4.0.6",
+    "postcss": "^8.4.38",
+    "postcss-scss": "^4.0.9",
     "prettier": "^3.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "sass": "^1.64.0",
-    "sass-loader": "^13.3.2",
-    "storybook": "^7.1.0",
-    "storybook-design-token": "^3.0.0-beta.3",
+    "sass": "^1.77.2",
+    "sass-loader": "^14.1.0",
+    "storybook": "^8.1.3",
+    "storybook-design-token": "^3.1.0",
     "style-loader": "^3.3.3",
-    "stylelint": "^15.10.1",
-    "stylelint-config-idiomatic-order": "^9.0.0",
+    "stylelint": "^16.2.1",
+    "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-config-prettier-scss": "^1.0.0",
-    "stylelint-config-standard-scss": "^10.0.0",
-    "stylelint-prettier": "^4.0.0",
-    "stylelint-scss": "^5.0.1"
+    "stylelint-config-standard-scss": "^13.0.0",
+    "stylelint-prettier": "^5.0.0",
+    "stylelint-scss": "^6.1.0",
+    "vite": "^5.2.11"
   },
   "peerDependencies": {
     "tom-select": "^2.0.0"