@rolemodel/optics 2.5.0 → 2.6.0

package/dist/css/optics+material_outlined_variable.css

@@ -103,67 +103,6 @@ Noto Sans supports:
 
 /* Tokens */
 :root {
-  /* Color HSLs
-    A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
-  */
-
-  /* Basic Colors */
-
-  /**
-  * @tokens Basic Colors
-  * @presenter Color
-  */
-  --op-color-white: hsl(0deg 100% 100%);
-  --op-color-black: hsl(0deg 0% 0%);
-
-  /**
-  * @tokens Primary Colors
-  * @presenter Color
-  */
-  --op-color-primary-h: 216;
-  --op-color-primary-s: 58%;
-  --op-color-primary-l: 48%;
-
-  /**
-  * @tokens Neutral Colors
-  * @presenter Color
-  */
-  --op-color-neutral-h: var(--op-color-primary-h);
-  --op-color-neutral-s: 4%;
-  --op-color-neutral-l: var(--op-color-primary-l);
-
-  /**
-  * @tokens Alerts Warning Colors
-  * @presenter Color
-  */
-  --op-color-alerts-warning-h: 47;
-  --op-color-alerts-warning-s: 100%;
-  --op-color-alerts-warning-l: 61%;
-
-  /**
-  * @tokens Alerts Danger Colors
-  * @presenter Color
-  */
-  --op-color-alerts-danger-h: 0;
-  --op-color-alerts-danger-s: 99%;
-  --op-color-alerts-danger-l: 76%;
-
-  /**
-  * @tokens Alerts Info Colors
-  * @presenter Color
-  */
-  --op-color-alerts-info-h: 216;
-  --op-color-alerts-info-s: 58%;
-  --op-color-alerts-info-l: 48%;
-
-  /**
-  * @tokens Alerts Notice Colors
-  * @presenter Color
-  */
-  --op-color-alerts-notice-h: 130;
-  --op-color-alerts-notice-s: 61%;
-  --op-color-alerts-notice-l: 64%;
-
   /**
   * @tokens Opacities
   * @presenter Opacity
@@ -353,18 +292,6 @@ Noto Sans supports:
   --op-space-3x-large: calc(var(--op-space-scale-unit) * 4); /* 40px */
   --op-space-4x-large: calc(var(--op-space-scale-unit) * 8); /* 80px */
 
-  /* Shadows */
-
-  /**
-  * @tokens Shadows
-  * @presenter Shadow
-  */
-  --op-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
-  --op-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
-  --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
-  --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
-  --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);
-
   /* Z Index */
 
   /**
@@ -447,6 +374,80 @@ Noto Sans supports:
     inset-inline-end: -100%;
   }
 }
+:root {
+  /* Color HSLs
+    A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
+  */
+
+  /* Basic Colors */
+
+  /**
+  * @tokens Basic Colors
+  * @presenter Color
+  */
+  --op-color-white: hsl(0deg 100% 100%);
+  --op-color-black: hsl(0deg 0% 0%);
+
+  /**
+  * @tokens Primary Colors
+  * @presenter Color
+  */
+  --op-color-primary-h: 216;
+  --op-color-primary-s: 58%;
+  --op-color-primary-l: 48%;
+
+  /**
+  * @tokens Neutral Colors
+  * @presenter Color
+  */
+  --op-color-neutral-h: var(--op-color-primary-h);
+  --op-color-neutral-s: 4%;
+  --op-color-neutral-l: var(--op-color-primary-l);
+
+  /**
+  * @tokens Alerts Warning Colors
+  * @presenter Color
+  */
+  --op-color-alerts-warning-h: 47;
+  --op-color-alerts-warning-s: 100%;
+  --op-color-alerts-warning-l: 61%;
+
+  /**
+  * @tokens Alerts Danger Colors
+  * @presenter Color
+  */
+  --op-color-alerts-danger-h: 0;
+  --op-color-alerts-danger-s: 99%;
+  --op-color-alerts-danger-l: 76%;
+
+  /**
+  * @tokens Alerts Info Colors
+  * @presenter Color
+  */
+  --op-color-alerts-info-h: 216;
+  --op-color-alerts-info-s: 58%;
+  --op-color-alerts-info-l: 48%;
+
+  /**
+  * @tokens Alerts Notice Colors
+  * @presenter Color
+  */
+  --op-color-alerts-notice-h: 130;
+  --op-color-alerts-notice-s: 61%;
+  --op-color-alerts-notice-l: 64%;
+
+  /* Shadows */
+
+  /**
+  * @tokens Shadows
+  * @presenter Shadow
+  */
+  --op-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
+  --op-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
+  --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
+  --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
+  --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);
+}
 :root {
   /* Enable light and dark mode switching */
   color-scheme: light dark;
@@ -5212,28 +5213,37 @@ dialog.modal {
   }
 
   /* Layout Modifiers */
+  /* The *-layout names are kept for backwards compatibility */
+  &.table--layout-auto,
   &.table--auto-layout {
     table-layout: auto;
   }
 
+  &.table--layout-fixed,
   &.table--fixed-layout {
     table-layout: fixed;
   }
 
   /* Table Density Modifiers */
+  /* The *-density names are kept for backwards compatibility */
+  &.table--density-default,
   &.table--default-density {
     --__op-table-cell-height: var(--_op-table-cell-height-default);
   }
 
+  &.table--density-comfortable,
   &.table--comfortable-density {
     --__op-table-cell-height: var(--_op-table-cell-height-comfortable);
   }
 
+  &.table--density-compact,
   &.table--compact-density {
     --__op-table-cell-height: var(--_op-table-cell-height-compact);
   }
 
   /* Striped Modifiers */
+  /* The *-striped names are kept for backwards compatibility */
+  &.table--striped-even,
   &.table--even-striped {
     tbody tr:nth-child(even) {
       background-color: var(--op-color-neutral-plus-seven);
@@ -5241,6 +5251,7 @@ dialog.modal {
     }
   }
 
+  &.table--striped-odd,
   &.table--odd-striped {
     tbody tr:nth-child(odd) {
       background-color: var(--op-color-neutral-plus-seven);