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

@epa-wg/custom-element-dist 0.0.36 → 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 (99) hide show

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

@@ -27,6 +27,7 @@ Action variation
     <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 rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=shift" />    <link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
           integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" rel="stylesheet"/>
@@ -43,31 +44,31 @@ Action variation
     <style>
         @import "../angular.css";
         @import "../material.css";
-        @import "../theme/semantic.css";
-        @import "../theme/consumer-theme.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; }
-                [slot="demo"]{ display: flex; gap: 2rem; align-items: center; justify-content: center;}
+                [slot="demo"]{ display: flex; gap: var(--cem-gap-section); align-items: center; justify-content: center;}
             }
-            var{ color: darkgreen; font-weight: bold; }
-            flex-3x{ display: inline-flex; flex-wrap: wrap;gap:3rem; max-width:12rem;}
+            var{ color: var(--cem-palette-calm-text); font-weight: var(--cem-typography-tag-font-weight); }
+            flex-3x{ display: inline-flex; flex-wrap: wrap; gap: var(--cem-gap-page); max-width: 12rem;}
             cem-action{display: inline-block;}
+        }
     </style>
 </head>
 <!--
 ToDO
 * docs w/ how to use
 -->
-<body>
+<body class="cem-theme-light">
 <template id="cem-action">
     <attribute name="text"
             aria-description="button text content. "
@@ -85,15 +86,69 @@ ToDO
             aria-description="Boolean. Default is 'false'. Values: true|false"
             ></attribute>
     <style>
-        & button{
-            display: flex; align-items: center; justify-content: center; gap:1em;
+        & {
+            display: inline-block;
+            --cem-action-background-color: var(--cem-action-explicit-default-background);
+            --cem-action-color: var(--cem-action-explicit-default-text);
+        }
+        &[color="primary"] {
+            --cem-action-background-color: var(--cem-action-primary-default-background);
+            --cem-action-color: var(--cem-action-primary-default-text);
+        }
+        &[color="secondary"] {
+            --cem-action-background-color: var(--cem-action-alternate-default-background);
+            --cem-action-color: var(--cem-action-alternate-default-text);
+        }
+        &[color="success"] {
+            --cem-action-background-color: var(--cem-palette-calm);
+            --cem-action-color: var(--cem-palette-calm-text);
+        }
+        &[color="alert"] {
+            --cem-action-background-color: var(--cem-action-destructive-default-background);
+            --cem-action-color: var(--cem-action-destructive-default-text);
+        }
+        &:hover {
+            --cem-action-background-color: var(--cem-action-explicit-hover-background);
+            --cem-action-color: var(--cem-action-explicit-hover-text);
+            --cem-action-box-shadow: var(--cem-action-box-shadow-hover);
+        }
+        &[color="primary"]:hover {
+            --cem-action-background-color: var(--cem-action-primary-hover-background);
+            --cem-action-color: var(--cem-action-primary-hover-text);
+        }
+        &[color="secondary"]:hover {
+            --cem-action-background-color: var(--cem-action-alternate-hover-background);
+            --cem-action-color: var(--cem-action-alternate-hover-text);
+        }
+        &[color="alert"]:hover {
+            --cem-action-background-color: var(--cem-action-destructive-hover-background);
+            --cem-action-color: var(--cem-action-destructive-hover-text);
+        }
+        &:active {
+            --cem-action-box-shadow: var(--cem-action-box-shadow-active);
+        }
+        & button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: var(--cem-gap-related);
+            width: 100%;
+            min-height: var(--cem-control-height);
+            padding: var(--cem-action-box-padding);
+            border: var(--cem-action-border, var(--cem-stroke-none) solid transparent);
+            border-radius: var(--cem-action-border-radius);
             background-color: var(--cem-action-background-color);
             color: var(--cem-action-color);
-            width: 100%;
+            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);
+            transition: var(--cem-action-transition);
+        }
+        &:focus-within button {
+            outline: var(--cem-stroke-focus) solid var(--cem-zebra-color-1);
+            outline-offset: var(--cem-stroke-indicator-offset);
         }
-        &[color="secondary"]>*>dd{ background-color: var(--cem-action-color-secondary); }
-        &[color="success"]>*>dd{ background-color: var(--cem-action-color-success); }
-        &[color="alert"]>*>dd{ background-color: var(--cem-action-color-alert); }
     </style>
     <button><slot>{text}</slot></button>
@@ -104,7 +159,7 @@ ToDO
 <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>
 <main>
@@ -188,10 +243,10 @@ ToDO
     <template>
         <style>
             &
-            {   --cem-action-text-color:red;
-                --cem-action-color:#FF08;
-                --cem-action-border: 1px blue solid;
-                cem-action dd{box-shadow: -2px 3px 8px blue;}
+            {   --cem-action-text-color: var(--cem-action-destructive-default-text);
+                --cem-action-color: var(--cem-action-destructive-default-background);
+                --cem-action-border: var(--cem-stroke-boundary) solid var(--cem-palette-trust);
+                cem-action dd{box-shadow: var(--cem-layer-work-floating);}
             }
         </style>
         <cem-action text="123"> CUSTOM COLOR </cem-action>
@@ -259,4 +314,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/autocomplete.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,25 +22,25 @@
     <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%; }
         }
     </style>
 </head>
-<body>
+<body class="cem-theme-light">
 <custom-element tag="cem-icon-link" hidden src="./icon-link.html#cem-icon-link" ></custom-element>
 <custom-element tag="cem-input"     hidden src="./input.html#cem-input" ></custom-element>
 <custom-element tag="cem-menu"      hidden src="./menu.html#cem-menu"></custom-element>
-<header class="cem-theme-teal">
+<header>
     <custom-element src="../index.html#nav-head" ></custom-element>
 </header>
 <main>
@@ -165,4 +166,4 @@
 <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
 </body>
-</html>
+</html>

package/src/material/components/badge.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,29 +22,29 @@
     <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; }
-            html-demo-element { [slot="demo"] { display: flex; gap: 8rem; } } }
-            flex-3x{ display: inline-flex; flex-wrap: wrap;gap:3rem; max-width:12rem;}
+            var{ color: var(--cem-palette-calm-text); font-weight: var(--cem-typography-tag-font-weight); }
+            html-demo-element { [slot="demo"] { display: flex; gap: var(--cem-gap-page); } } }
+            flex-3x{ display: inline-flex; flex-wrap: wrap; gap: var(--cem-gap-page); max-width: 12rem;}
     </style>
 </head>
 <!--
 ToDO
 * docs w/ how to use
 -->
-<body>
+<body class="cem-theme-light">
 <template id="cem-badge">
     <attribute name="text"
             aria-description="Badge text content. Up to 4 characters including + sign."
@@ -61,7 +62,7 @@ ToDO
             aria-description="Boolean. Default is 'false'. Values: true|false"
             ></attribute>
     <style>
-        &[dot]>*>dd{ height: 0; width: 0; min-width: 0.5rem; color: transparent; padding: 0; min-height: 0.5rem; }
+        &[dot]>*>dd{ height: 0; width: 0; min-width: var(--cem-dim-x-small); color: transparent; padding: 0; min-height: var(--cem-dim-x-small); }
         &[invisible]>*>dd{ height: 0; width: 0; min-width: 0; color: transparent; padding: 0; min-height:0; }
         &[align~=left]>*>dd{  --cem-badge-align-h: -100%; }
         &[align~=center]>*>dd{  --cem-badge-align-h: -25%; }
@@ -70,9 +71,11 @@ ToDO
         &[align~=middle]>*>dd{  --cem-badge-align-v: 25%; }
         &[align~=bottom]>*>dd{  --cem-badge-align-v: 75%; }
         &{ position: relative; display: inline-block; --cem-badge-align-v: -50%; --cem-badge-align-h: 50%; }
+        &[color="primary"]{ --cem-badge-color: var(--cem-badge-color-primary); --cem-badge-text-color: var(--cem-action-primary-default-text); }
+        &[color="secondary"]{ --cem-badge-color: var(--cem-badge-color-secondary); --cem-badge-text-color: var(--cem-action-alternate-default-text); }
+        &[color="success"]{ --cem-badge-color: var(--cem-badge-color-success); --cem-badge-text-color: var(--cem-palette-calm-text); }
+        &[color="alert"]{ --cem-badge-color: var(--cem-badge-color-alert); --cem-badge-text-color: var(--cem-action-destructive-default-text); }
         &>*>dd{
-            /*position: absolute; top:-0.5rem; border-radius: 0.5rem; */
-            /*padding: 0.25rem; background-color: red;*/
             display: flex ;
             flex-direction: row;
             flex-wrap: wrap;
@@ -83,27 +86,24 @@ ToDO
             align-items: center;
             position: absolute;
             box-sizing: border-box;
-            font-family: Roboto, Helvetica, Arial, sans-serif;
-            font-weight: 500;
-            font-size: 0.75rem;
-            min-width: 20px;
-            line-height: 1;
-            height: 20px;
+            font-family: var(--cem-typography-tag-font-family);
+            font-weight: var(--cem-typography-tag-font-weight);
+            font-size: var(--cem-typography-tag-font-size);
+            min-width: calc(var(--cem-dim-large) + var(--cem-dim-xx-small));
+            line-height: var(--cem-typography-tag-line-height);
+            height: calc(var(--cem-dim-large) + var(--cem-dim-xx-small));
             z-index: 1;
-            background-color: var(--cem-badge-color, --cem-badge-color-primary);
-            color: var(--cem-badge-text-color,rgb(255, 255, 255));
+            background-color: var(--cem-badge-color, var(--cem-badge-color-primary));
+            color: var(--cem-badge-text-color, var(--cem-action-primary-default-text));
             top: 0;
             right: 0;
             transform: scale(1) translate(var(--cem-badge-align-h), var(--cem-badge-align-v));
             transform-origin: 100% 0%;
-            padding: 0 6px;
-            border-radius: 10px;
-            border: var(--cem-badge-border, none);
-            transition: all 225ms cubic-bezier(0.4, 0, 0.2, 1);
+            padding: 0 var(--cem-dim-x-small);
+            border-radius: var(--cem-bend-round);
+            border: var(--cem-badge-border);
+            transition: all var(--cem-duration-action) var(--cem-easing-smooth);
         }
-        &[color="secondary"]>*>dd{ background-color: var(--cem-badge-color-secondary); }
-        &[color="success"]>*>dd{ background-color: var(--cem-badge-color-success); }
-        &[color="alert"]>*>dd{ background-color: var(--cem-badge-color-alert); }
     </style>
     <dd>{text}</dd>
@@ -111,11 +111,10 @@ ToDO
 </template>
 <custom-element hidden src="#cem-badge" tag="cem-badge"></custom-element>
-<custom-element hidden src="./icon-link.html#cem-badge-link" tag="cem-badge-link"></custom-element>
 <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>
 <main>
@@ -165,10 +164,10 @@ ToDO
     <template>
         <style>
             &
-            {   --cem-badge-text-color:red;
-                --cem-badge-color:#FF08;
-                --cem-badge-border: 1px blue solid;
-                cem-badge dd{box-shadow: -2px 3px 8px blue;}
+            {   --cem-badge-text-color: var(--cem-action-destructive-default-text);
+                --cem-badge-color: var(--cem-action-destructive-default-background);
+                --cem-badge-border: var(--cem-stroke-boundary) solid var(--cem-palette-trust);
+                cem-badge dd{box-shadow: var(--cem-layer-work-floating);}
             }
         </style>
         <cem-badge text="123"> CUSTOM COLOR </cem-badge>
@@ -236,4 +235,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/cem-theme-components.css ADDED Viewed

@@ -0,0 +1,131 @@
+:root {
+    --primary-color: var(--cem-palette-trust);
+    --secondary-color: var(--cem-palette-enthusiasm);
+    --alert-color: var(--cem-palette-danger);
+    --text-color: var(--cem-palette-comfort-text);
+    --cem-action-explicit-default-background: var(--cem-palette-creativity);
+    --cem-action-explicit-default-text: var(--cem-palette-creativity-text);
+    --cem-action-explicit-hover-background: color-mix(in srgb, var(--cem-palette-creativity) 70%, var(--cem-palette-creativity-x));
+    --cem-action-explicit-hover-text: var(--cem-palette-creativity-text);
+    --cem-action-explicit-active-background: color-mix(in srgb, var(--cem-palette-creativity) 25%, var(--cem-palette-creativity-x));
+    --cem-action-explicit-active-text: var(--cem-palette-creativity-text-x);
+    --cem-action-primary-default-background: var(--cem-palette-trust);
+    --cem-action-primary-default-text: var(--cem-palette-trust-text);
+    --cem-action-primary-hover-background: color-mix(in srgb, var(--cem-palette-trust) 70%, var(--cem-palette-trust-x));
+    --cem-action-primary-hover-text: var(--cem-palette-trust-text);
+    --cem-action-primary-active-background: color-mix(in srgb, var(--cem-palette-trust) 25%, var(--cem-palette-trust-x));
+    --cem-action-primary-active-text: var(--cem-palette-trust-text-x);
+    --cem-action-primary-disabled-background: color-mix(in srgb, var(--cem-palette-trust) 30%, var(--cem-palette-conservative-x));
+    --cem-action-primary-disabled-text: var(--cem-palette-conservative-text-x);
+    --cem-action-contextual-default-background: var(--cem-palette-comfort);
+    --cem-action-contextual-default-text: var(--cem-palette-comfort-text);
+    --cem-action-contextual-hover-background: color-mix(in srgb, var(--cem-palette-comfort) 70%, var(--cem-palette-comfort-x));
+    --cem-action-contextual-hover-text: var(--cem-palette-comfort-text);
+    --cem-action-contextual-active-background: color-mix(in srgb, var(--cem-palette-comfort) 25%, var(--cem-palette-comfort-x));
+    --cem-action-contextual-active-text: var(--cem-palette-comfort-text-x);
+    --cem-action-contextual-disabled-background: color-mix(in srgb, var(--cem-palette-comfort) 30%, var(--cem-palette-conservative-x));
+    --cem-action-contextual-disabled-text: var(--cem-palette-conservative-text-x);
+    --cem-action-alternate-default-background: var(--cem-palette-enthusiasm);
+    --cem-action-alternate-default-text: var(--cem-palette-enthusiasm-text);
+    --cem-action-alternate-hover-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 70%, var(--cem-palette-enthusiasm-x));
+    --cem-action-alternate-hover-text: var(--cem-palette-enthusiasm-text);
+    --cem-action-alternate-active-background: color-mix(in srgb, var(--cem-palette-enthusiasm) 25%, var(--cem-palette-enthusiasm-x));
+    --cem-action-alternate-active-text: var(--cem-palette-enthusiasm-text-x);
+    --cem-action-destructive-default-background: var(--cem-palette-danger);
+    --cem-action-destructive-default-text: var(--cem-palette-danger-text);
+    --cem-action-destructive-hover-background: color-mix(in srgb, var(--cem-palette-danger) 70%, var(--cem-palette-danger-x));
+    --cem-action-destructive-hover-text: var(--cem-palette-danger-text);
+    --cem-action-destructive-active-background: color-mix(in srgb, var(--cem-palette-danger) 25%, var(--cem-palette-danger-x));
+    --cem-action-destructive-active-text: var(--cem-palette-danger-text-x);
+    --cem-action-background-color: var(--cem-action-explicit-default-background);
+    --cem-action-color: var(--cem-action-explicit-default-text);
+    --cem-action-color-secondary: var(--cem-action-alternate-default-background);
+    --cem-action-color-success: var(--cem-palette-calm);
+    --cem-action-color-alert: var(--cem-action-destructive-default-background);
+    --cem-action-border-radius: var(--cem-bend-control);
+    --cem-action-box-padding: var(--cem-control-padding-y) var(--cem-control-padding-x);
+    --cem-action-box-shadow: var(--cem-layer-work);
+    --cem-action-box-shadow-hover: var(--cem-layer-work-floating);
+    --cem-action-box-shadow-active: var(--cem-layer-base);
+    --cem-action-transition:
+        background-color var(--cem-duration-action) var(--cem-easing-smooth),
+        color var(--cem-duration-action) var(--cem-easing-smooth),
+        box-shadow var(--cem-duration-action) var(--cem-easing-smooth);
+    --cem-action-primary-color: var(--cem-action-primary-default-text);
+    --cem-action-primary-background: var(--cem-action-primary-default-background);
+    --cem-action-primary-background-hover: var(--cem-action-primary-hover-background);
+    --cem-action-primary-background-focus: var(--cem-action-primary-hover-background);
+    --cem-action-primary-background-active: var(--cem-action-primary-active-background);
+    --cem-list-background-color: var(--cem-action-contextual-default-background);
+    --cem-list-background-color-hover: var(--cem-action-contextual-hover-background);
+    --cem-list-background-color-focus: var(--cem-action-primary-hover-background);
+    --cem-app-surface-variant: var(--cem-palette-conservative);
+    --cem-app-on-surface: var(--cem-palette-conservative-text);
+    --cem-app-primary: var(--cem-palette-trust);
+    --cem-on-surface-variant: var(--cem-palette-conservative-text);
+    --cem-filled-text-field-container-color: var(--cem-palette-conservative);
+    --cem-filled-text-field-container-color-hover: color-mix(in srgb, var(--cem-palette-conservative) 70%, var(--cem-palette-conservative-x));
+    --cem-filled-text-field-label-text-color: var(--cem-palette-conservative-text);
+    --cem-filled-text-field-input-text-color: var(--cem-palette-comfort-text);
+    --cem-filled-text-field-caret-color: var(--cem-palette-trust);
+    --cem-outline-color-focus: var(--cem-palette-creativity-x);
+    --cem-focus-outline-height: var(--cem-stroke-strong);
+    --cem-input-outline-color: var(--cem-palette-conservative-x);
+    --cem-input-outline: inset 0 calc(-1 * var(--cem-stroke-divider)) 0 var(--cem-input-outline-color);
+    --cem-sys-body-small-size: var(--cem-typography-size-xxs);
+    --cem-form-field-subscript-text-size: var(--cem-typography-tag-font-size);
+    --cem-drop-transition: all var(--cem-duration-overlay) var(--cem-easing-highlighted-end);
+    --cem-icon-size-small: var(--cem-typography-size-l);
+    --cem-icon-size: var(--cem-icon-button-icon-size);
+    --cem-icon-size-large: var(--cem-dim-x-large);
+}
+.cem-theme-light,
+[data-theme="cem-theme-light"] {
+    --cem-app-surface-variant: var(--cem-color-grey-l);
+    --cem-filled-text-field-container-color: var(--cem-color-grey-l);
+    --cem-filled-text-field-container-color-hover: color-mix(in srgb, var(--cem-color-grey-l) 70%, var(--cem-color-grey-d));
+}
+.cem-theme-dark,
+[data-theme="cem-theme-dark"] {
+    --cem-app-surface-variant: var(--cem-color-grey-d);
+    --cem-filled-text-field-container-color: var(--cem-color-grey-d);
+    --cem-filled-text-field-container-color-hover: color-mix(in srgb, var(--cem-color-grey-d) 70%, var(--cem-color-grey-l));
+}
+body {
+    background-color: var(--cem-palette-comfort);
+    color: var(--cem-palette-comfort-text);
+    font-family: var(--cem-typography-reading-font-family);
+}
+.cem-bend-sharp {
+    --cem-bend: var(--cem-bend-sharp);
+    --cem-bend-control: var(--cem-bend);
+    --cem-action-border-radius: var(--cem-bend-control);
+}
+.cem-bend-smooth {
+    --cem-bend: var(--cem-bend-smooth);
+    --cem-bend-control: var(--cem-bend);
+    --cem-action-border-radius: var(--cem-bend-control);
+}
+.cem-bend-round {
+    --cem-bend: var(--cem-bend-round);
+    --cem-bend-control: var(--cem-bend);
+    --cem-action-border-radius: var(--cem-bend-control);
+}

package/src/material/components/dropdown.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,14 +22,14 @@
     <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%;
@@ -38,11 +39,11 @@
                 overflow: visible;
                 [slot="legend"] {
-                    border-radius: 1rem 1rem 0 0;
+                    border-radius: var(--cem-bend-surface) var(--cem-bend-surface) 0 0;
                 }
                 [slot="description"] {
-                    padding: 0 1rem 1rem 1rem;
+                    padding: 0 var(--cem-inset-container) var(--cem-inset-container) var(--cem-inset-container);
                     dd {
                         padding: 0 !important;
@@ -59,11 +60,11 @@
     </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="./menu.html#cem-menu" tag="cem-menu"></custom-element>
-<header class="cem-theme-teal">
+<header>
     <custom-element src="../index.html#nav-head"></custom-element>
 </header>
 <main>
@@ -80,13 +81,24 @@
                 &>* {
                     position: relative;
-                    --cem-dropdown-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-dropdown-max-height: 10rem;
-                    --cem-dropdown-base-min-width: 8em;
+                    --cem-dropdown-shadow: var(--cem-layer-overlay);
+                    --cem-dropdown-max-height: calc(4 * var(--cem-menu-row-height));
+                    --cem-dropdown-base-min-width: calc(4 * var(--cem-control-height));
                     & > label {
                         min-width: var(--cem-dropdown-base-min-width);
                         display: inline-block;
+                        min-height: var(--cem-control-height);
+                        padding: var(--cem-control-padding-y) var(--cem-control-padding-x);
+                        border-radius: var(--cem-bend-control);
+                        background: var(--cem-action-contextual-default-background);
+                        color: var(--cem-action-contextual-default-text);
+                        cursor: pointer;
+                    }
+                    & > label:focus-visible {
+                        outline: var(--cem-stroke-focus) solid var(--cem-zebra-color-1);
+                        outline-offset: var(--cem-stroke-indicator-offset);
                     }
                     & > aside {
@@ -101,14 +113,17 @@
                         display: flex;
                         flex-direction: column;
+                        background: var(--cem-action-contextual-default-background);
+                        color: var(--cem-action-contextual-default-text);
                         border-radius: var(--cem-autocomplete-container-shape);
                         border-top-left-radius: 0;
                         border-top-right-radius: 0;
                         box-shadow: var(--cem-dropdown-shadow);
+                        z-index: 1;
                     }
                 }
             </style>
-            <slot name="base"><label>{$label}</label></slot>
+            <slot name="base"><label tabindex="0">{$label}</label></slot>
             <aside>
                 <slot name=""></slot>
             </aside>
@@ -170,4 +185,4 @@
 <script src="https://unpkg.com/html-demo-element@1/html-demo-element.js" type="module"></script>
 </body>
-</html>
+</html>