@rolemodel/optics 2.0.0 → 2.1.0

package/dist/css/optics.min.css

@@ -1,5 +1,6 @@
+
 @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';
-@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block';
+@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700&display=block';
 /* Third party Vendors */
 /* Box sizing rules */
 *,
@@ -66,7 +67,12 @@ select {
     scroll-behavior: auto !important;
   }
 }
-/* Tokens */
+/* Fonts */
+/*
+  Instead of hosting the font files locally which requires a compiler to handle them, we pull fonts
+  from Google's CDN. For more information on the variable font, see:
+  https://developers.google.com/fonts/docs/material_symbols#variable_font_with_google_fonts
+*/
 /*
 Noto Sans supports:
   font-weight: {anything between 100 and 900}
@@ -79,6 +85,14 @@ Noto Sans supports:
   font-stretch: {anything between 62.5% and 100%}
   font-style: {normal or italic}
 */
+/* Noto Sans and Noto Serif */
+/*
+  See all icons at: https://fonts.google.com/icons?icon.set=Material+Symbols
+  This import of Material Symbols supports:
+  font weight set through: font-variation-settings: 'wght' {100..700}
+*/
+/* Material Symbols */
+/* Tokens */
 :root {
   /* Color HSLs
     A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
@@ -281,6 +295,7 @@ Noto Sans supports:
   * @tokens Transition
   */
   --op-transition-accordion: rotate 120ms ease-in;
+  --op-transition-accordion-content: height 300ms ease, content-visibility 300ms ease allow-discrete;
   --op-transition-input: all 120ms ease-in;
   --op-transition-sidebar: all 200ms ease-in-out;
   --op-transition-modal: all 300ms ease-in;
@@ -2358,6 +2373,11 @@ small {
   /* Public API (customizable component options) */
   --_op-accordion-summary-min-height: calc(8 * var(--op-size-unit)); /* 32px */
 
+  overflow: hidden;
+  interpolate-size: allow-keywords;
+
+  /* Elements */
+
   summary {
     display: grid;
     min-height: var(--_op-accordion-summary-min-height);
@@ -2379,19 +2399,40 @@ small {
     }
 
     .accordion__marker {
-      --op-mso-optical-sizing: 48;
+      --__op-icon-font-size: var(--_op-icon-font-size-x-large);
+      --__op-icon-optical-size: var(--_op-icon-optical-size-x-large);
 
-      font-size: var(--op-font-x-large);
       justify-self: flex-end;
       transition: var(--op-transition-accordion);
       user-select: none;
     }
   }
 
+  &::details-content {
+    height: 0;
+    transition: var(--op-transition-accordion-content);
+  }
+
   &[open] {
     summary .accordion__marker {
       rotate: 0.25turn;
     }
+
+    &::details-content {
+      height: auto;
+    }
+  }
+
+  /* Modifiers */
+
+  &.accordion--disable-animation {
+    summary .accordion__marker {
+      transition: none;
+    }
+
+    &::details-content {
+      transition: none;
+    }
   }
 }
 .alert {
@@ -2404,10 +2445,10 @@ small {
   /* Elements */
 
   .alert__icon {
-    --op-mso-optical-sizing: 40; /* .icon--large styling */
-    --op-mso-weight: var(--op-font-weight-bold); /* .icon--weight-bold styling */
+    --__op-icon-font-size: var(--_op-icon-font-size-large);
+    --__op-icon-optical-size: var(--_op-icon-optical-size-large);
+    --__op-icon-weight: var(--_op-icon-weight-bold);
 
-    font-size: var(--op-font-large); /* .icon--large styling */
     line-height: var(--op-line-height-dense);
   }
 
@@ -3631,101 +3672,124 @@ textarea.form-control:not([type='radio'], [type='checkbox']) {
   }
   /* stylelint-enable no-descending-specificity */
 }
-/*
-  Look up icons at: https://fonts.google.com/icons?icon.set=Material+Symbols
-  Instead of hosting the font files locally which requires the compiler to handle them, we pull the icons
-  from Googles CDN like we do for our other fonts
-  https://developers.google.com/fonts/docs/material_symbols#variable_font_with_google_fonts
-*/
-.material-symbols-outlined,
-.material-symbols {
-  --op-mso-fill: 0;
-  --op-mso-weight: var(--op-font-weight-normal);
-  --op-mso-grade: 0;
-  --op-mso-optical-sizing: 20;
+.icon {
+  /* Public API (customizable component options) */
 
-  font-size: var(--op-font-medium);
-  font-variation-settings:
-    'FILL' var(--op-mso-fill),
-    'wght' var(--op-mso-weight),
-    'GRAD' var(--op-mso-grade),
-    'opsz' var(--op-mso-optical-sizing);
+  /* Weight */
+  --_op-icon-weight-light: var(--op-font-weight-light);
+  --_op-icon-weight-normal: var(--op-font-weight-normal);
+  --_op-icon-weight-semi-bold: var(--op-font-weight-semi-bold);
+  --_op-icon-weight-bold: var(--op-font-weight-bold);
+
+  /* Fill */
+  --_op-icon-fill-outlined: 0;
+  --_op-icon-fill-filled: 1;
+
+  /* Emphasis */
+  --_op-icon-emphasis-low: -20;
+  --_op-icon-emphasis-normal: 0;
+  --_op-icon-emphasis-high: 200;
+
+  /* Size */
+  --_op-icon-font-size-small: var(--op-font-small);
+  --_op-icon-font-size-medium: var(--op-font-medium);
+  --_op-icon-font-size-large: var(--op-font-large);
+  --_op-icon-font-size-x-large: var(--op-font-2x-large);
+  --_op-icon-optical-size-small: 20;
+  --_op-icon-optical-size-medium: 20;
+  --_op-icon-optical-size-large: 40;
+  --_op-icon-optical-size-x-large: 48;
+
+  /* Private API (component option defaults) */
+  --__op-icon-weight: var(--_op-icon-weight-normal);
+  --__op-icon-fill: var(--_op-icon-fill-outlined);
+  --__op-icon-emphasis: var(--_op-icon-emphasis-normal);
+  --__op-icon-font-size: var(--_op-icon-font-size-medium);
+  --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
+
+  display: inline-block;
+  width: var(--__op-icon-font-size);
+  height: var(--__op-icon-font-size);
+  font-size: var(--__op-icon-font-size);
+  font-weight: var(--__op-icon-weight);
   line-height: var(--op-line-height-densest);
   vertical-align: middle;
-}
-/* Fill */
-.icon--outlined {
-  --op-mso-fill: 0;
-}
-.icon--filled {
-  --op-mso-fill: 1;
-}
-/* Weight */
-.icon--weight-light {
-  --op-mso-weight: var(--op-font-weight-light);
-}
-.icon--weight-normal {
-  --op-mso-weight: var(--op-font-weight-normal);
-}
-.icon--weight-semi-bold {
-  --op-mso-weight: var(--op-font-weight-semi-bold);
-}
-.icon--weight-bold {
-  --op-mso-weight: var(--op-font-weight-bold);
-}
-/* Emphasis */
-.icon--low-emphasis {
-  --op-mso-grade: -20;
-}
-.icon--normal-emphasis {
-  --op-mso-grade: 0;
-}
-.icon--high-emphasis {
-  --op-mso-grade: 200;
-}
-/* Size */
-.icon--medium {
-  font-size: var(--op-font-medium);
 
-  --op-mso-optical-sizing: 20;
-}
-.icon--large {
-  font-size: var(--op-font-large);
+  /* Fill Modifiers */
+  &.icon--outlined {
+    --__op-icon-fill: var(--_op-icon-fill-outlined);
+  }
 
-  --op-mso-optical-sizing: 40;
-}
-.icon--x-large {
-  font-size: var(--op-font-2x-large);
+  &.icon--filled {
+    --__op-icon-fill: var(--_op-icon-fill-filled);
+  }
 
-  --op-mso-optical-sizing: 48;
-}
-.custom-icons {
-  display: inline-block;
-  width: var(--op-font-2x-large);
-  height: var(--op-font-2x-large);
+  /* Weight Modifiers */
+  &.icon--weight-light {
+    --__op-icon-weight: var(--_op-icon-weight-light);
+  }
 
-  &.icon--medium {
-    font-size: var(--op-font-small);
+  &.icon--weight-normal {
+    --__op-icon-weight: var(--_op-icon-weight-normal);
+  }
+
+  &.icon--weight-semi-bold {
+    --__op-icon-weight: var(--_op-icon-weight-semi-bold);
+  }
+
+  &.icon--weight-bold {
+    --__op-icon-weight: var(--_op-icon-weight-bold);
+  }
+
+  /* Emphasis */
+  &.icon--low-emphasis {
+    --__op-icon-emphasis: var(--_op-icon-emphasis-low);
+  }
+
+  &.icon--normal-emphasis {
+    --__op-icon-emphasis: var(--_op-icon-emphasis-normal);
+  }
+
+  &.icon--high-emphasis {
+    --__op-icon-emphasis: var(--_op-icon-emphasis-high);
+  }
+
+  /* Size Modifiers */
+  &.icon--small {
+    --__op-icon-font-size: var(--_op-icon-font-size-small);
+    --__op-icon-optical-size: var(--_op-icon-optical-size-small);
+  }
 
-    --op-mso-optical-sizing: 20;
+  &.icon--medium {
+    --__op-icon-font-size: var(--_op-icon-font-size-medium);
+    --__op-icon-optical-size: var(--_op-icon-optical-size-medium);
   }
 
   &.icon--large {
-    width: var(--op-font-large);
-    height: var(--op-font-large);
+    --__op-icon-font-size: var(--_op-icon-font-size-large);
+    --__op-icon-optical-size: var(--_op-icon-optical-size-large);
   }
 
   &.icon--x-large {
-    width: var(--op-font-3x-large);
-    height: var(--op-font-3x-large);
+    --__op-icon-font-size: var(--_op-icon-font-size-x-large);
+    --__op-icon-optical-size: var(--_op-icon-optical-size-x-large);
   }
 }
-.custom-icons svg {
-  width: 100%;
-  height: 100%;
+/* Material Icons class provided by the Google Fonts CDN */
+.material-symbols-outlined {
+  font-variation-settings:
+    'FILL' var(--__op-icon-fill),
+    'wght' var(--__op-icon-weight),
+    'GRAD' var(--__op-icon-emphasis),
+    'opsz' var(--__op-icon-optical-size);
+  font-weight: unset;
 }
-.icon-link {
-  line-height: 0;
+/* Custom SVG Icons app specific */
+.custom-icons {
+  svg {
+    width: 100%;
+    height: 100%;
+  }
 }
 .modal-wrapper {
   /* Public API (customizable component options) */
@@ -4016,10 +4080,9 @@ dialog.modal {
       justify-content: flex-start;
 
       .material-symbols-outlined {
-        --op-mso-optical-sizing: 40;
-        --op-mso-weight: var(--op-font-weight-bold);
-
-        font-size: var(--op-font-large);
+        --__op-icon-font-size: var(--_op-icon-font-size-large);
+        --__op-icon-optical-size: var(--_op-icon-optical-size-large);
+        --__op-icon-weight: var(--_op-icon-weight-bold);
       }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolemodel/optics",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "packageManager": "yarn@4.2.2",
   "description": "Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.",
   "main": "dist/css/optics.css",
@@ -46,33 +46,33 @@
   },
   "devDependencies": {
     "@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",
+    "@storybook/addon-essentials": "^8.5.3",
+    "@storybook/blocks": "^8.5.3",
+    "@storybook/html": "^8.5.3",
+    "@storybook/html-vite": "^8.5.3",
+    "@storybook/manager-api": "^8.5.3",
+    "@storybook/preview-api": "^8.5.3",
+    "@storybook/test": "^8.5.3",
+    "@storybook/theming": "^8.5.3",
     "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": "^0.6.13",
+    "eslint-plugin-storybook": "^0.11.2",
     "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": "^8.1.3",
+    "storybook": "^8.5.3",
     "storybook-design-token": "^3.1.0",
     "style-loader": "^3.3.3",
     "stylelint": "^16.2.1",
     "stylelint-config-idiomatic-order": "^10.0.0",
     "stylelint-prettier": "^5.0.0",
-    "vite": "^5.2.11"
+    "vite": "^5.4.14"
   },
   "peerDependencies": {
     "tom-select": "^2.0.0"