@rolemodel/optics 2.0.0 → 2.1.0

package/dist/css/addons/fonts/material_symbols_outlined_variable.css

@@ -0,0 +1,10 @@
+/*
+  See all icons at: https://fonts.google.com/icons?icon.set=Material+Symbols
+  Material Symbols supports:
+  optical sizing set through: font-variation-settings: 'opsz' {20|40|48}
+  font weight set through: font-variation-settings: 'wght' {100..700}
+  fill set through: font-variation-settings: 'FILL' {0|1}
+  emphasis set through: font-variation-settings: 'GRAD' {-50|0|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';

package/dist/css/addons/fonts/phosphor_icons.css

@@ -0,0 +1,44 @@
+/*
+  See all icons at: https://phosphoricons.com/
+  Current version: 2.1.1
+*/
+
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/thin/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/light/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/bold/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/fill/style.css';
+@import 'https://unpkg.com/@phosphor-icons/web@2.1.1/src/duotone/style.css';
+
+/* Note: the important tag is how Phosphor sets up the fonts which is why we replicate them here */
+
+/* Phosphor Icons */
+.ph {
+  font-weight: unset;
+
+  /* Fill Modifiers */
+  &.icon--filled {
+    font-family: 'Phosphor-Fill' !important;
+  }
+
+  /* Weight Modifiers */
+  &.icon--weight-thin {
+    font-family: 'Phosphor-Thin' !important;
+  }
+
+  &.icon--weight-light {
+    font-family: 'Phosphor-Light' !important;
+  }
+
+  &.icon--weight-normal {
+    font-family: 'Phosphor' !important;
+  }
+
+  &.icon--weight-bold {
+    font-family: 'Phosphor-Bold' !important;
+  }
+}
+
+.ph-duotone {
+  font-weight: unset;
+}

package/dist/css/addons/fonts/tabler_icons.css

@@ -0,0 +1,11 @@
+/*
+  See all icons at: https://tabler.io/icons
+  Current version: 3.30.0
+*/
+
+@import 'https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.30.0/dist/tabler-icons.min.css';
+
+/* Tabler Icons */
+.ti {
+  font-weight: unset;
+}

package/dist/css/components/accordion.css

@@ -2,6 +2,11 @@
   /* 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);
@@ -23,18 +28,39 @@
     }
 
     .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;
+    }
   }
 }

package/dist/css/components/alert.css

@@ -8,10 +8,10 @@
   /* 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);
   }
 

package/dist/css/components/icon.css

@@ -1,114 +1,121 @@
-/*
-  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
-*/
-
-@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 {
-  --op-mso-fill: 0;
-  --op-mso-weight: var(--op-font-weight-normal);
-  --op-mso-grade: 0;
-  --op-mso-optical-sizing: 20;
-
-  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);
+.icon {
+  /* Public API (customizable component options) */
+
+  /* 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;
-}
+  /* Fill Modifiers */
+  &.icon--outlined {
+    --__op-icon-fill: var(--_op-icon-fill-outlined);
+  }
 
-.icon--normal-emphasis {
-  --op-mso-grade: 0;
-}
+  &.icon--filled {
+    --__op-icon-fill: var(--_op-icon-fill-filled);
+  }
 
-.icon--high-emphasis {
-  --op-mso-grade: 200;
-}
+  /* Weight Modifiers */
+  &.icon--weight-light {
+    --__op-icon-weight: var(--_op-icon-weight-light);
+  }
 
-/* Size */
-.icon--medium {
-  font-size: var(--op-font-medium);
+  &.icon--weight-normal {
+    --__op-icon-weight: var(--_op-icon-weight-normal);
+  }
 
-  --op-mso-optical-sizing: 20;
-}
+  &.icon--weight-semi-bold {
+    --__op-icon-weight: var(--_op-icon-weight-semi-bold);
+  }
 
-.icon--large {
-  font-size: var(--op-font-large);
+  &.icon--weight-bold {
+    --__op-icon-weight: var(--_op-icon-weight-bold);
+  }
 
-  --op-mso-optical-sizing: 40;
-}
+  /* Emphasis */
+  &.icon--low-emphasis {
+    --__op-icon-emphasis: var(--_op-icon-emphasis-low);
+  }
 
-.icon--x-large {
-  font-size: var(--op-font-2x-large);
+  &.icon--normal-emphasis {
+    --__op-icon-emphasis: var(--_op-icon-emphasis-normal);
+  }
 
-  --op-mso-optical-sizing: 48;
-}
+  &.icon--high-emphasis {
+    --__op-icon-emphasis: var(--_op-icon-emphasis-high);
+  }
 
-.custom-icons {
-  display: inline-block;
-  width: var(--op-font-2x-large);
-  height: var(--op-font-2x-large);
+  /* Size Modifiers */
+  &.icon--small {
+    --__op-icon-font-size: var(--_op-icon-font-size-small);
+    --__op-icon-optical-size: var(--_op-icon-optical-size-small);
+  }
 
   &.icon--medium {
-    font-size: var(--op-font-small);
-
-    --op-mso-optical-sizing: 20;
+    --__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%;
+  }
 }

package/dist/css/components/sidebar.css

@@ -60,10 +60,9 @@
       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/dist/css/core/fonts/icon_fonts.css

@@ -0,0 +1,8 @@
+/*
+  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 */
+@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700&display=block';

package/dist/css/core/fonts/index.css

@@ -0,0 +1,8 @@
+/*
+  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
+*/
+
+@import 'text_fonts';
+@import 'icon_fonts';

package/dist/css/core/fonts/text_fonts.css

@@ -0,0 +1,16 @@
+/*
+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}
+*/
+
+/* Noto Sans and Noto Serif */
+@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';

package/dist/css/core/tokens/base_tokens.css

@@ -1,19 +1,3 @@
-@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}
-*/
-
 :root {
   /* Color HSLs
     A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
@@ -216,6 +200,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;

package/dist/css/optics.css

@@ -1,6 +1,9 @@
 /* Third party Vendors */
 @import 'modern-css-reset/dist/reset';
 
+/* Fonts */
+@import 'core/fonts';
+
 /* Tokens */
 @import 'core/tokens';