npm - @epa-wg/custom-element-dist - Versions diffs - 0.0.37 → 0.0.38 - Mend

@epa-wg/custom-element-dist 0.0.37 → 0.0.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (116) hide show

package/src/material/components/icon-link.html CHANGED Viewed

@@ -5,6 +5,7 @@
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
     <title>Components - custom-element - Material Design</title>
     <link href="../../custom-element/demo/wc-square.svg" rel="icon"/>
+    <link href="../../../node_modules/@epa-wg/cem-theme/dist/lib/css/cem-combined.css" rel="stylesheet"/>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
     <link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
           integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" rel="stylesheet"/>
@@ -21,45 +22,46 @@
     <style>
         @import "../angular.css";
         @import "../material.css";
-        @import "../theme/semantic.css";
+        @import "./cem-theme-components.css";
         @import "../demo.css";
         main{
             display: flex; flex-wrap: wrap;
-            gap: 3rem;
-            padding: 5rem;
+            gap: var(--cem-gap-page);
+            padding: var(--cem-layout-gutter-max);
             &>p{ min-width: 90%; }
             html-demo-element
             {   overflow: visible;
-                [slot="legend"]{ border-radius: 1rem 1rem 0 0; }
-                [slot="description"]{ padding: 0 1rem 1rem 1rem; dd{ padding: 0 !important;margin: 0; }}
+                [slot="legend"]{ border-radius: var(--cem-bend-surface) var(--cem-bend-surface) 0 0; }
+                [slot="description"]{ padding: 0 var(--cem-inset-container) var(--cem-inset-container) var(--cem-inset-container); dd{ padding: 0 !important;margin: 0; }}
                 [slot="description"] dd{ padding: 0; }
             }
+            cem-icon-link+cem-icon-link:before{ content: " ";}
         }
     </style>
 </head>
-<body>
+<body class="cem-theme-light">
 <template id="cem-icon-link">
     <attribute name="href"></attribute>
     <attribute name="icon"></attribute>
     <attribute aria-description="color appearance. Default value is 'normal'. Values: normal|primary|secondary|alert|blend"
                name="kind"></attribute>
     <style>
-        &:not([kind]) a, &[kind="normal"] a {
-            /*background-color: var(--mdc-theme-primary, #6200ee);*/
-        }
         a {
             display: inline-flex;
             align-items: center;
-            gap: 0.5rem;
-            padding: 0.5rem 1rem;;
-            border-radius: 1.5rem;
+            gap: var(--cem-gap-related);
+            min-height: var(--cem-control-height);
+            padding: var(--cem-action-box-padding);
+            border-radius: var(--cem-action-border-radius);
             background-color: var(--cem-action-primary-background);
             transition: var(--cem-action-transition);
             box-shadow: var(--cem-action-box-shadow);
+            font-family: var(--cem-typography-ui-font-family);
+            font-size: var(--cem-typography-ui-font-size);
+            font-weight: var(--cem-typography-ui-font-weight);
+            &>span{ display: flex; align-items: center; }
             &:hover {
                 background-color: var(--cem-action-primary-background-hover);
                 box-shadow: var(--cem-action-box-shadow-hover);
@@ -69,15 +71,20 @@
                 background-color: var(--cem-action-primary-background-focus);
             }
+            &:focus-visible {
+                outline: var(--cem-stroke-focus) solid var(--cem-zebra-color-1);
+                outline-offset: var(--cem-stroke-indicator-offset);
+            }
             &:active, &:focus:active {
                 background-color: var(--cem-action-primary-background-active);
             }
             &, &:visited {
                 text-decoration: none;
-                color: var(--mat-light-blue-900);
+                color: var(--cem-action-primary-color);
             }
-            --icon-size: 2rem;
+            --icon-size: var(--cem-icon-size);
             min-height: var(--icon-size);
         }
@@ -99,7 +106,7 @@
 <custom-element hidden src="#cem-icon-link" tag="cem-icon-link"></custom-element>
-<header class="cem-theme-teal">
+<header>
     <custom-element src="../index.html#nav-head" ></custom-element>
 </header>
 <main>
@@ -158,4 +165,4 @@
 <script type="module" src="https://unpkg.com/html-demo-element@1.0.8/html-demo-element.js"></script>
 </body>
-</html>
+</html>

package/src/material/components/icon.html CHANGED Viewed

@@ -5,6 +5,7 @@
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
     <title>Components - custom-element - Material Design</title>
     <link href="../../custom-element/demo/wc-square.svg" rel="icon"/>
+    <link href="../../../node_modules/@epa-wg/cem-theme/dist/lib/css/cem-combined.css" rel="stylesheet"/>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
     <link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
           integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" rel="stylesheet"/>
@@ -21,20 +22,20 @@
     <style>
         @import "../angular.css";
         @import "../material.css";
-        @import "../theme/semantic.css";
+        @import "./cem-theme-components.css";
         @import "../demo.css";
         main{
             display: flex; flex-wrap: wrap;
-            gap: 3rem;
-            padding: 5rem;
+            gap: var(--cem-gap-page);
+            padding: var(--cem-layout-gutter-max);
             &>p{ min-width: 90%; }
             html-demo-element
             {   overflow: visible;
-                [slot="legend"]{ border-radius: 1rem 1rem 0 0; }
-                [slot="description"]{ padding: 0 1rem 1rem 1rem; dd{ padding: 0 !important;margin: 0; }}
+                [slot="legend"]{ border-radius: var(--cem-bend-surface) var(--cem-bend-surface) 0 0; }
+                [slot="description"]{ padding: 0 var(--cem-inset-container) var(--cem-inset-container) var(--cem-inset-container); dd{ padding: 0 !important;margin: 0; }}
                 [slot="description"] dd{ padding: 0; }
             }
-            var{ color: darkgreen; font-weight: bold; }
+            var{ color: var(--cem-palette-calm-text); font-weight: var(--cem-typography-tag-font-weight); }
         }
         cem-icon{ margin: 1rem; }
     </style>
@@ -43,7 +44,7 @@
 ToDO
 * docs w/ how to use
 -->
-<body>
+<body class="cem-theme-light">
 <template id="cem-icon">
     <attribute name="image"
             aria-description="defines the icon in one of the libraries or URL. The selection algorithm
@@ -64,9 +65,9 @@ ToDO
         &[size="normal"  ]>*>.icon{ height: var(--cem-icon-size);       font-size: var(--cem-icon-size); }
         &[size="small"   ]>*>.icon{ height: var(--cem-icon-size-small); font-size: var(--cem-icon-size-small); }
         &[size="large"   ]>*>.icon{ height: var(--cem-icon-size-large); font-size: var(--cem-icon-size-large); }
-        &{ display: inline-flex; justify-content: center; }
+        &{ display: inline-flex; justify-content: center; font-family: var(--cem-typography-ui-font-family); }
         &>* {
-            display: inline-flex; align-items: center; gap: calc( var(--cem-icon-size) / 4 );
+            display: inline-flex; align-items: center; gap: var(--cem-gap-related);
             .icon {
                 font-size: var(--cem-icon-size);
@@ -89,7 +90,7 @@ ToDO
 <custom-element hidden src="#cem-icon" tag="cem-icon"></custom-element>
 <custom-element hidden src="./icon-link.html#cem-icon-link" tag="cem-icon-link"></custom-element>
-<header class="cem-theme-teal">
+<header>
     <custom-element src="../index.html#nav-head"></custom-element>
 </header>
 <main>
@@ -234,9 +235,9 @@ ToDO
             For font based icons the color is inherited from CSS text <code>color</code>.
         </p>
         <template>
-<cem-icon image="fas fa-heart" style="color:red"     > red    </cem-icon>
-<cem-icon image="fas fa-heart" style="color:green"   > green  </cem-icon>
-<cem-icon image="fas fa-heart" style="color:blue"    > blue   </cem-icon>
+<cem-icon image="fas fa-heart" style="color:var(--cem-palette-danger)" > danger </cem-icon>
+<cem-icon image="fas fa-heart" style="color:var(--cem-palette-calm)"   > calm   </cem-icon>
+<cem-icon image="fas fa-heart" style="color:var(--cem-palette-trust)"  > trust  </cem-icon>
         </template>
     </html-demo-element>
@@ -249,4 +250,4 @@ ToDO
 <script src="https://unpkg.com/html-demo-element@1.0.8/html-demo-element.js" type="module"></script>
 </body>
-</html>
+</html>

package/src/material/components/input.html CHANGED Viewed

@@ -5,6 +5,7 @@
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
     <title>Components - custom-element - Material Design</title>
     <link href="../../custom-element/demo/wc-square.svg" rel="icon"/>
+    <link href="../../../node_modules/@epa-wg/cem-theme/dist/lib/css/cem-combined.css" rel="stylesheet"/>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
     <link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
           integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" rel="stylesheet"/>
@@ -21,12 +22,12 @@
     <style>
         @import "../angular.css";
         @import "../material.css";
-        @import "../theme/semantic.css";
+        @import "./cem-theme-components.css";
         @import "../demo.css";
         main{
             display: flex; flex-wrap: wrap;
-            gap: 3rem;
-            padding: 5rem;
+            gap: var(--cem-gap-page);
+            padding: var(--cem-layout-gutter-max);
             &>p{ min-width: 90%; }
             html-demo-element{flex:1; width: 100%; }
         }
@@ -36,12 +37,12 @@
     </style>
 </head>
-<body>
+<body class="cem-theme-light">
 <custom-element hidden src="./icon-link.html#cem-icon-link" tag="cem-icon-link"></custom-element>
 <custom-element hidden src="./icon.html#cem-icon" tag="cem-icon"></custom-element>
-<header class="cem-theme-teal">
+<header>
     <custom-element src="../index.html#nav-head" ></custom-element>
 </header>
 <pre>
@@ -127,36 +128,37 @@
                     display: flex; flex-direction: column; justify-content: center;
                     --input-padding: 0;
-                    --cem-input-container-shape: 0.25rem;
-                    --cem-input-background-color: var(--cem-list-background-color);
-                    --cem-input-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 1px 5px 0px rgba(0, 0, 0, .12);
-                    --cem-input-focus-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
+                    --cem-input-background-color: var(--cem-action-explicit-default-background);
+                    --cem-input-container-elevation-shadow: var(--cem-layer-work);
+                    --cem-input-focus-transition: all var(--cem-duration-action) var(--cem-easing-smooth);
                     &:has(input:invalid,input:user-invalid,input:out-of-range, .warn>*:not(:empty) )
-                    {   --cem-filled-text-field-label-text-color: var(--alert-color,red);
+                    {   --cem-filled-text-field-label-text-color: var(--alert-color, var(--cem-palette-danger));
                         --cem-input-outline-color:var(--cem-filled-text-field-label-text-color);
-                        --cem-input-outline: inset 0 -1px 0 var(--cem-input-outline-color);
+                        --cem-input-outline: inset 0 calc(-1 * var(--cem-stroke-divider)) 0 var(--cem-input-outline-color);
                         --cem-outline-color-focus: var(--cem-input-outline-color);
                         color: var(--cem-filled-text-field-label-text-color);
                         .supporting{ display: none; }
                     }
                     &>label
-                    {   display: flex; flex: 1; gap: 0.5rem;
-                        padding: 0.5rem 1rem;
-                        background-color: var(--cem-filled-text-field-container-color, var(--cem-app-surface-variant));
+                    {   display: flex; flex: 1; align-items: center; gap: var(--cem-gap-related);
+                        padding: var(--cem-control-padding-y) var(--cem-control-padding-x);
+                        background-color: var(--cem-input-background-color);
                         &:hover
-                        {   --cem-filled-text-field-container-color: var(--cem-filled-text-field-container-color-hover,silver);
-                            --cem-input-outline-color:var(--text-color,black);
-                            box-shadow:  inset 0 -1px 0 var(--cem-input-outline-color,black);
-                            color:var(--text-color,black)
+                        {   --cem-filled-text-field-container-color: var(--cem-filled-text-field-container-color-hover, var(--cem-list-background-color-hover));
+                            --cem-input-outline-color: var(--text-color, var(--cem-palette-comfort-text));
+                            box-shadow: inset 0 calc(-1 * var(--cem-stroke-divider)) 0 var(--cem-input-outline-color);
+                            color: var(--text-color, var(--cem-palette-comfort-text))
                         }
                         box-shadow: var(--cem-input-outline);
-                        transition: var(--drop-transition);
+                        transition: var(--cem-drop-transition);
                         box-sizing: border-box;
-                        min-height: 3.5rem;
+                        min-height: calc(var(--cem-control-height) + var(--cem-control-padding-y) + var(--cem-control-padding-y));
                         color: var(--cem-filled-text-field-label-text-color);
+                        font-family: var(--cem-typography-ui-font-family);
                         position: relative;
                         &>.entry{ display: flex;flex-direction: column; justify-content: center;flex:1; }
+                        &>span{ display: flex; }
                         label{display: flex;}
                         input
                         {   background: none; padding: var(--input-padding);
@@ -167,8 +169,9 @@
                             color: var(--cem-filled-text-field-input-text-color, var(--cem-app-on-surface));
                             caret-color: var(--cem-filled-text-field-caret-color, var(--cem-app-primary));
-                            font-size: 1rem;
-                            transition: var(--drop-transition);
+                            font-family: var(--cem-typography-ui-font-family);
+                            font-size: var(--cem-typography-ui-font-size);
+                            transition: var(--cem-drop-transition);
                         }
                         &:after{ display: block; width: 0; height: 0;  content: ' ';
                             left:0;
@@ -196,7 +199,7 @@
                     slice{display: none;}
                     .warn,.supporting
                     {
-                        padding: 0.25rem 1rem;
+                        padding: var(--cem-dim-xx-small) var(--cem-control-padding-x);
                         font-size: var(--cem-form-field-subscript-text-size, var(--cem-sys-body-small-size));
                     }
                     [slot="trailing"],[slot="leading"]{display: flex;}
@@ -567,4 +570,4 @@
 <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
 </body>
-</html>
+</html>

package/src/material/components/menu.html CHANGED Viewed

@@ -5,6 +5,7 @@
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
     <title>Components - custom-element - Material Design</title>
     <link href="../../custom-element/demo/wc-square.svg" rel="icon"/>
+    <link href="../../../node_modules/@epa-wg/cem-theme/dist/lib/css/cem-combined.css" rel="stylesheet"/>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
     <link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
           integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" rel="stylesheet"/>
@@ -21,27 +22,27 @@
     <style>
         @import "../angular.css";
         @import "../material.css";
-        @import "../theme/semantic.css";
+        @import "./cem-theme-components.css";
         @import "../demo.css";
         main{
             display: flex; flex-wrap: wrap;
-            gap: 3rem;
-            padding: 5rem;
+            gap: var(--cem-gap-page);
+            padding: var(--cem-layout-gutter-max);
             &>p{ min-width: 90%; }
             html-demo-element
             {   overflow: visible;
-                [slot="legend"]{ border-radius: 1rem 1rem 0 0; }
-                [slot="description"]{ padding: 0 1rem 1rem 1rem; dd{ padding: 0 !important;margin: 0; }}
+                [slot="legend"]{ border-radius: var(--cem-bend-surface) var(--cem-bend-surface) 0 0; }
+                [slot="description"]{ padding: 0 var(--cem-inset-container) var(--cem-inset-container) var(--cem-inset-container); dd{ padding: 0 !important;margin: 0; }}
                 [slot="description"] dd{ padding: 0; }
             }
         }
     </style>
 </head>
-<body>
+<body class="cem-theme-light">
 <custom-element hidden src="./icon-link.html#cem-icon-link" tag="cem-icon-link"></custom-element>
-<header class="cem-theme-teal">
+<header>
     <custom-element src="../index.html#nav-head" ></custom-element>
 </header>
 <main>
@@ -71,18 +72,22 @@
                     &>*
                     {   display: flex;
                         align-items: center;
-                        padding: var(--cem-menu-item-padding);
-                        background-color: var( --cem-menu-item-background );
-                        color: var( --cem-menu-item-color );
+                        min-height: var(--cem-menu-row-height);
+                        padding: var(--cem-control-padding-y) var(--cem-control-padding-x);
+                        background-color: var(--cem-action-explicit-default-background);
+                        color: var(--cem-action-explicit-default-text);
                         text-decoration: none;
-                        font-weight: var(--cem-menu-item-font-weight);
-                        &:focus{ z-index: 1; }
-                        &[disabled],&[disabled]:visited{ color:var(--cem-menu-item-color-disabled); pointer-events: none;}
-                        &:visited{ color:var(--cem-menu-item-color); }
+                        font-family: var(--cem-typography-ui-font-family);
+                        font-size: var(--cem-typography-ui-font-size);
+                        font-weight: var(--cem-typography-tag-font-weight);
+                        transition: var(--cem-action-transition);
+                        &:focus{ z-index: 1; outline: var(--cem-stroke-focus) solid var(--cem-zebra-color-1); outline-offset: var(--cem-stroke-indicator-offset); }
+                        &[disabled],&[disabled]:visited{ color:var(--cem-action-explicit-disabled-text); pointer-events: none;}
+                        &:visited{ color:var(--cem-action-explicit-default-text); }
                         &:hover
                         {
-                            color: var(--cem-menu-item-hover-color);
-                            background-color: var(--cem-menu-item-hover-background);
+                            color: var(--cem-action-explicit-hover-text);
+                            background-color: var(--cem-action-explicit-hover-background);
                         }
                         &:empty{ display: none;}
                     }
@@ -157,7 +162,7 @@
     <template>
         <style>
             a
-            {   --cem-menu-item-color:blue;
+            {   --cem-menu-item-color: var(--cem-palette-trust);
                 --cem-menu-item-background: salmon;
                 --cem-menu-item-hover-background: blue;
                 --cem-menu-item-hover-color: yellow;
@@ -233,4 +238,4 @@
 <script type="module" src="https://unpkg.com/html-demo-element@1.0.8/html-demo-element.js"></script>
 </body>
-</html>
+</html>

package/src/material/components.html CHANGED Viewed

@@ -5,6 +5,7 @@
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
     <title>Components - custom-element - Material Design</title>
     <link href="../custom-element/demo/wc-square.svg" rel="icon"/>
+    <link href="../../node_modules/@epa-wg/cem-theme/dist/lib/css/cem-combined.css" rel="stylesheet"/>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
     <link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
           integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" rel="stylesheet"/>
@@ -21,19 +22,19 @@
     <style>
         @import "./angular.css";
         @import "./material.css";
-        @import "./theme/semantic.css";
+        @import "./components/cem-theme-components.css";
         @import "./demo.css";
         main{
             display: flex; flex-wrap: wrap;
-            gap: 3rem;
-            padding: 5rem;
+            gap: var(--cem-gap-page);
+            padding: var(--cem-layout-gutter-max);
             &>*{ flex: 1 1 12rem;}
             &>p{ min-width: 90%; }
         }
     </style>
 </head>
-<body>
+<body class="cem-theme-light">
 <custom-element tag="cem-icon"      hidden src="./components/icon.html#cem-icon" ></custom-element>
 <custom-element tag="cem-input"     hidden src="./components/input.html#cem-input" ></custom-element>
 <custom-element tag="cem-icon-link" hidden src="./components/icon-link.html#cem-icon-link" ></custom-element>
@@ -41,7 +42,7 @@
 <custom-element tag="cem-badge"     hidden src="./components/badge.html#cem-badge" ></custom-element>
 <custom-element tag="cem-dropdown"  hidden src="./components/dropdown.html#cem-dropdown" ></custom-element>
-<header class="cem-theme-teal">
+<header>
     <custom-element src="./index.html#nav-head" ></custom-element>
 </header>
 <main>
@@ -57,21 +58,21 @@
                 &>dce-root
                 {   display: inline-flex; flex-direction: column; justify-content: space-between;
                     flex: 1;
-                    transition: background .3s ease;
-                    border: 1px solid #c4c6d0;
-                    border-radius: 12px;
+                    transition: var(--cem-action-transition);
+                    border: var(--cem-stroke-boundary) solid var(--cem-palette-conservative-x);
+                    border-radius: var(--cem-bend-surface);
                     overflow: hidden;
-                    &>*{padding: 1rem;}
+                    &>*{padding: var(--cem-inset-container);}
                     &>a
-                    {   color: var(--cem-action-secondary-color, black);
-                        background-color:var(--cem-action-secondary-background, silver);
+                    {   color: var(--cem-action-explicit-default-text);
+                        background-color: var(--cem-action-explicit-default-background);
                         min-height: 6rem;
-                        transition: background .3s ease;
+                        transition: var(--cem-action-transition);
                         transform: translateZ(0);
-                        &:hover { background-color: var(--cem-action-secondary-background-hover); }
-                        &:focus { background-color: var(--cem-action-secondary-background-focus); }
+                        &:hover { background-color: var(--cem-action-explicit-hover-background); }
+                        &:focus { background-color: var(--cem-action-explicit-hover-background); }
                         &:focus:active,
-                        &:active{ background-color: var(--cem-action-secondary-background-active); }
+                        &:active{ background-color: var(--cem-action-explicit-active-background); }
                         &, &:visited { text-decoration: none; }
                         h3{ text-transform: capitalize; }
@@ -116,7 +117,7 @@
     <demo-list-card head="badge" description="A small value indicator that can be overlaid on another object.">
         <template>
-            <div style="display: inline-flex; gap:2rem;">
+            <div style="display: inline-flex; gap:var(--cem-gap-section);">
                 <cem-badge text="0"    color="secondary"><template> <cem-icon image="far fa-envelope"                   ></cem-icon> </template></cem-badge>
                 <cem-badge text="999+"                  ><template> <cem-icon image="🛒" vertical="middle"              ></cem-icon> </template></cem-badge>
                 <cem-badge text="999+"  dot             ><template> <cem-icon image="notifications" vertical="middle"   ></cem-icon> </template></cem-badge>
@@ -134,7 +135,7 @@
         <div>
         <cem-dropdown label="drop base" >
             <template>
-                <style>aside{background-color: silver; padding: 1rem; }</style>
+                <style>aside{background-color: var(--cem-palette-conservative); padding: var(--cem-inset-container); }</style>
                 dropped content
             </template>
@@ -155,4 +156,4 @@
     <a href="../../LICENSE"> Code and documentation licensed under an Apache License 2.0 </a>
 </footer>
 </body>
-</html>
+</html>

package/src/material/demo.css CHANGED Viewed

@@ -5,17 +5,17 @@ body {
 header {
     text-align: center;
-    --mdc-text-button-label-text-color: #005cbb;
-    --mat-sidenav-content-background-color: var(--mat-indigo-50, #d7e3ff);
-    color: var(--text-color, var(--mat-app-on-background));
-    background-color: var(--primary-color, var(--mat-app-background));
-    --cem-action-box-shadow:none;
-    --cem-action-box-shadow-hover:none;
+    --mdc-text-button-label-text-color: var(--cem-action-primary-default-text);
+    --mat-sidenav-content-background-color: var(--cem-palette-trust);
-    &{ padding: var(--cem-dim-x-small,0.5rem) var(--cem-dim-small,1rem) }
+    color: var(--cem-palette-trust-text);
+    background-color: var(--cem-palette-trust);
+    box-shadow: var(--cem-layer-work);
+    cem-icon-link a{ box-shadow: none;}
+    &{ padding: var(--cem-inset-control) var(--cem-inset-container) }
     h1,p{position: relative; z-index: 2;}
     .logo-large{ position: absolute;
-        right: var(--cem-dim-x-large);
+        right: var(--cem-layout-gutter-wide);
         height: var(--cem-dim-xxx-large);
         z-index: 1;
         opacity: 0.5;
@@ -23,14 +23,26 @@ header {
 }
 footer{ text-align: center;
     a
-    {   color: var(--text-color, black);
+    {   color: var(--cem-palette-comfort-text);
         text-decoration: none;
         &:hover,&:focus{text-decoration: underline;}
     }
 }
-code{ font-size: 125%; font-weight: bold; }
+code{
+    font-family: var(--cem-typography-script-font-family);
+    font-size: var(--cem-typography-script-font-size);
+    font-weight: var(--cem-typography-script-font-weight);
+}
 html-demo-element{
     pre{ margin: 0}
-    [slot="text"]{margin: 0 1rem; }
-    [slot="demo"]{margin: 0 1rem 1rem 1rem; }
+    [slot="text"]{margin: 0 var(--cem-inset-container); }
+    [slot="demo"]{margin: 0 var(--cem-inset-container) var(--cem-inset-container) var(--cem-inset-container); }
+    [slot="legend"], [slot="description"] {
+        background-color: var(--cem-action-contextual-indeterminate-background);
+    }
 }
+section {
+    display: flex;
+    gap: var(--cem-gap-page);
+    flex-wrap: wrap;
+}

package/src/material/index.html CHANGED Viewed

@@ -5,6 +5,7 @@
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
     <title>custom-element - Material Design</title>
     <link href="demo/wc-square.svg" rel="icon"/>
+    <link href="../../node_modules/@epa-wg/cem-theme/dist/lib/css/cem-combined.css" rel="stylesheet"/>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
     <link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
           integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" rel="stylesheet"/>
@@ -21,12 +22,12 @@
     <style>
         @import "./angular.css";
         @import "./material.css";
-        @import "./theme/semantic.css";
+        @import "./components/cem-theme-components.css";
         @import "./demo.css";
     </style>
 </head>
-<body>
+<body class="cem-theme-light">
 <template id="nav-head">
     <style>
@@ -34,12 +35,13 @@
             display: flex;
             flex-wrap: wrap;
             justify-content: flex-end;
+            gap: max(var(--cem-layout-cluster-gap), var(--cem-coupling-guard-min));
             spacer {
                 flex: 10 10;
             }
-            padding: 0 var(--mat-blue-50, 8px);
+            padding: var(--cem-inset-control) var(--cem-layout-gutter);
             --mdc-text-button-label-text-tracking: .006rem;
@@ -58,11 +60,15 @@
         section:has(*) {
             display: flex;
             flex-direction: column;
-            margin: var(--cem-dim-xxx-large, 4rem);
+            gap: var(--cem-layout-stack-gap);
+            margin: var(--cem-gap-page);
             h1 {
-                font-size: var(--cem-dim-x-large, 3.5rem);
-                text-shadow: var(--primary-color, silver) 0 0 var(--cem-dim-medium);
+                font-family: var(--cem-typography-brand-font-family);
+                font-size: var(--cem-typography-brand-font-size);
+                font-weight: var(--cem-typography-brand-font-weight);
+                line-height: var(--cem-typography-brand-line-height);
+                text-shadow: var(--cem-palette-trust-x) 0 0 var(--cem-dim-medium);
             }
         }
@@ -87,13 +93,13 @@
 </template>
 <custom-element hidden src="./components/icon-link.html#cem-icon-link" tag="cem-icon-link"></custom-element>
-<header class="cem-theme-teal">
+<header>
     <custom-element src="#nav-head">
         <template>
             <img alt="custom-element logo" class="logo-large" src="../custom-element/demo/wc-square.svg"/>
             <h1> <code>&lt;custom-element&gt;</code> Material </h1>
             <p> Material Design components for <a href="https://github.com/EPA-WG/custom-element"><code>custom-element</code></a> </p>
-            <cem-icon-link class="cem-theme-default" href="./components.html" title="Select a theme for the documentation">Get
+            <cem-icon-link href="./components.html" title="Select a theme for the documentation">Get
                 started
             </cem-icon-link>
         </template>
@@ -107,4 +113,4 @@
     <a href="../../LICENSE"> Code and documentation licensed under an Apache License 2.0 </a>
 </footer>
 </body>
-</html>
+</html>