@epa-wg/custom-element-dist 0.0.32 → 0.0.34

package/src/material/theme/semantic.css

@@ -1,113 +1,132 @@
-/*  cem - custom-element material
-    SEMANTIC THEME basic definitions
-    based on https://blog.firsov.net/search/label/Semantic%20Theme
- */
-:root{
-
-/*#region SPACING DIMENSIONS */
---cem-dim-xx-small  : 0.25rem;
---cem-dim-x-small   : 0.5rem;
---cem-dim-small     : 0.75rem;
---cem-dim-medium    : 1rem;
---cem-dim-large     : 1.5rem;
---cem-dim-x-large   : 2rem;
---cem-dim-xx-large  : 4rem;
---cem-dim-xxx-large : 8rem;
-/*#endregion */
-
-/*#region OUTLINE THIKNESS */
---cem-thick-none: 0;
---cem-thick-xx-light: 0.5px;
---cem-thick-x-light : 1px;
---cem-thick-light   : 2px;
---cem-thick-normal  : 4px;
---cem-thick-bold    : 0.5rem;
---cem-thick-x-bold  : 1rem;
---cem-thick-xx-bold : 4rem;
-/*#endregion */
-
-/*#region TEXT TRACKING/SPACING */
---cem-tracking-negative : -0.25em;
---cem-tracking-stick    : 0;
---cem-tracking-tight    : 0.5px;
---cem-tracking-normal   : auto;
---cem-tracking-loose    : 0.25em;
---cem-tracking-sparse   : 0.5em;
---cem-tracking-spread   : 1em;
-/*#endregion */
-
-/*#region branded colors  */
-
-/*#endregion */
-
-/*#region action */
---cem-drop-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
-
-/*#endregion */
-
-}
-
-
-/*#region semantic colors  */
-:root, .cem-theme-default, .cem-theme-azure{
-
-    --primary-background-color: var(--ng-azure-90);
-    --secondary-background-color: var(--ng-azure-80);
-    --alert-color: var(--ng-magenta-80);
-    --text-color: var(--ng-azure-10);
-
-    --cem-action-primary-color: var(--text-color);
-    --cem-action-primary-background: transparent;
-    --cem-action-primary-background-hover: var(--ng-azure-80,lightgrey);
-    --cem-action-primary-background-focus: var(--ng-azure-70,silver);
-    --cem-action-primary-background-active: var(--ng-azure-60,grey);
-
-    --cem-action-secondary-color: var(--text-color);
-    --cem-action-secondary-background: var(--ng-azure-secondary-90);
-    --cem-action-secondary-background-hover: var(--ng-azure-secondary-80,lightgrey);
-    --cem-action-secondary-background-focus: var(--ng-azure-secondary-70,silver);
-    --cem-action-secondary-background-active: var(--ng-azure-secondary-60,grey);
-
-    --cem-action-box-shadow: var(--ng-action-elevation-shadow, 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12));
-    --cem-action-box-shadow-hover: var(--ng-action-box-shadow-hover);
-    --cem-action-transition: var(--ng-action-transition);
-
-    --cem-app-surface-variant: var(--ng-azure-variant-90);
-    --cem-app-on-surface: var(--ng-azure-variant-70);
-    --cem-app-primary: var(--ng-azure-variant-60);
-
-    --cem-filled-text-field-container-color: var(--ng-azure-variant-90);
-    --cem-filled-text-field-label-text-color: var(--ng-azure-variant-30);
-    --cem-filled-text-field-input-text-color: var(--ng-azure-variant-0);
-    --cem-filled-text-field-caret-color: var(--ng-azure-variant-10);
-    --cem-outline-color-focus: var(--ng-azure-40);
-
-    --cem-list-background-color: var(--ng-azure-neutral-94);
-    --cem-list-background-color-hover: var(--ng-azure-variant-90);
-    --cem-list-background-color-focus: var(--ng-azure-variant-80);
-
-    --cem-menu-item-color: black;
-    --cem-menu-item-color-disabled: var(--ng-azure-neutral-50);
-    --cem-menu-item-background: var(--ng-azure-neutral-94);
-    --cem-menu-item-hover-background: var(--ng-azure-neutral-80);
-    --cem-menu-item-hover-color: black;
-    --cem-menu-item-padding: 0.5rem;
-    --cem-menu-item-font-weight: bold;
-}
-
-.cem-theme-teal{
-
-    --primary-color: var(--ng-teal-primary);
-    --secondary-color: var(--ng-teal-hover);
-    --alert-color: var(--ng-magenta-80);
-    --text-color: var(--ng-azure-40);
-
-    --cem-action-primary-color: var(--primary-color);
-
-    --cem-action-primary-background: transparent;
-    --cem-action-primary-background-hover: var(--ng-teal-hover,lightgrey);
-    --cem-action-primary-background-focus: var(--ng-teal-focus,silver);
-    --cem-action-primary-background-active: var(--ng-teal-active,grey);
-}
-
-/*#endregion */
+/*  cem - custom-element material
+    SEMANTIC THEME basic definitions
+    based on https://blog.firsov.net/search/label/Semantic%20Theme
+ */
+:root{
+
+/*#region SPACING DIMENSIONS */
+--cem-dim-xx-small  : 0.25rem;
+--cem-dim-x-small   : 0.5rem;
+--cem-dim-small     : 0.75rem;
+--cem-dim-medium    : 1rem;
+--cem-dim-large     : 1.5rem;
+--cem-dim-x-large   : 2rem;
+--cem-dim-xx-large  : 4rem;
+--cem-dim-xxx-large : 8rem;
+/*#endregion */
+
+/*#region OUTLINE THIKNESS */
+--cem-thick-none: 0;
+--cem-thick-xx-light: 0.5px;
+--cem-thick-x-light : 1px;
+--cem-thick-light   : 2px;
+--cem-thick-normal  : 4px;
+--cem-thick-bold    : 0.5rem;
+--cem-thick-x-bold  : 1rem;
+--cem-thick-xx-bold : 4rem;
+/*#endregion */
+
+/*#region TEXT TRACKING/SPACING */
+--cem-tracking-negative : -0.25em;
+--cem-tracking-stick    : 0;
+--cem-tracking-tight    : 0.5px;
+--cem-tracking-normal   : auto;
+--cem-tracking-loose    : 0.25em;
+--cem-tracking-sparse   : 0.5em;
+--cem-tracking-spread   : 1em;
+/*#endregion */
+
+/*#region branded colors  */
+
+/*#endregion */
+
+/*#region action */
+--cem-drop-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+/*#endregion */
+
+}
+
+
+/*#region semantic colors  */
+:root, .cem-theme-default, .cem-theme-azure{
+
+    --cem-icon-size: 2rem;
+    --cem-icon-size-small: 1rem;
+    --cem-icon-size-large: 3rem;
+
+    --cem-sys-body-small-size: .75rem;
+    --cem-form-field-subscript-text-size: var(--cem-sys-body-small-size);
+
+    --primary-background-color: var(--ng-azure-90);
+    --secondary-background-color: var(--ng-azure-80);
+    --alert-color: var(--ng-error-40);
+    --text-color: var(--ng-azure-10);
+
+    --cem-action-primary-color: var(--text-color);
+    --cem-action-primary-background: transparent;
+    --cem-action-primary-background-hover: var(--ng-azure-80,lightgrey);
+    --cem-action-primary-background-focus: var(--ng-azure-70,silver);
+    --cem-action-primary-background-active: var(--ng-azure-60,grey);
+
+    --cem-action-secondary-color: var(--text-color);
+    --cem-action-secondary-background: var(--ng-azure-secondary-90);
+    --cem-action-secondary-background-hover: var(--ng-azure-secondary-80,lightgrey);
+    --cem-action-secondary-background-focus: var(--ng-azure-secondary-70,silver);
+    --cem-action-secondary-background-active: var(--ng-azure-secondary-60,grey);
+
+    --cem-action-box-shadow: var(--ng-action-elevation-shadow, 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12));
+    --cem-action-box-shadow-hover: var(--ng-action-box-shadow-hover);
+    --cem-action-transition: var(--ng-action-transition);
+
+    --cem-app-surface-variant: var(--ng-azure-variant-90);
+    --cem-app-on-surface: var(--ng-azure-variant-70);
+    --cem-app-primary: var(--ng-azure-variant-60);
+    --cem-on-surface-variant: var(--cem-action-secondary-color);
+
+    --cem-filled-text-field-container-color: var(--ng-azure-variant-90);
+    --cem-filled-text-field-container-color-hover: var(--ng-azure-variant-80);
+    --cem-filled-text-field-label-text-color: var(--ng-azure-variant-30);
+    --cem-filled-text-field-input-text-color: var(--ng-azure-variant-0);
+    --cem-filled-text-field-caret-color: var(--ng-azure-variant-10);
+    --cem-outline-color-focus: var(--ng-azure-40);
+    --cem-focus-outline-height: 3px;
+    --cem-input-outline-color: black;
+    --cem-input-outline: inset 0 -1px 0 var(--cem-input-outline-color,black);
+
+    --cem-list-background-color: var(--ng-azure-neutral-94);
+    --cem-list-background-color-hover: var(--ng-azure-variant-90);
+    --cem-list-background-color-focus: var(--ng-azure-variant-80);
+
+    --cem-menu-item-color: black;
+    --cem-menu-item-color-disabled: var(--ng-azure-neutral-50);
+    --cem-menu-item-background: var(--ng-azure-neutral-94);
+    --cem-menu-item-hover-background: var(--ng-azure-neutral-80);
+    --cem-menu-item-hover-color: black;
+    --cem-menu-item-padding: 0.5rem;
+    --cem-menu-item-font-weight: bold;
+
+    --cem-badge-color-primary: var(--ng-azure-50);
+    --cem-badge-color-secondary: var(--ng-magenta-50);
+    --cem-badge-color-success: var(--ng-cyan-60);
+    --cem-badge-color-alert: var(--ng-error-50);
+    --cem-badge-color: var(--cem-badge-color-primary);
+
+}
+
+.cem-theme-teal{
+
+    --primary-color: var(--ng-teal-primary);
+    --secondary-color: var(--ng-teal-hover);
+    --alert-color: var(--ng-magenta-80);
+    --text-color: var(--ng-azure-40);
+
+    --cem-action-primary-color: var(--primary-color);
+
+    --cem-action-primary-background: transparent;
+    --cem-action-primary-background-hover: var(--ng-teal-hover,lightgrey);
+    --cem-action-primary-background-focus: var(--ng-teal-focus,silver);
+    --cem-action-primary-background-active: var(--ng-teal-active,grey);
+}
+
+/*#endregion */

package/src/material/theme/style-bug.html

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en"
+      xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+      xmlns:xhtml="http://www.w3.org/1999/xhtml"
+      xmlns:exslt="http://exslt.org/common"
+>
+<head>
+    <meta charset="UTF-8">
+    <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="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"/>
+
+    <script type="importmap">
+        {
+          "imports": {
+            "@epa-wg/": "../../"
+          }
+        }
+    </script>
+    <script src="../../custom-element/module-url.js" type="module"></script>
+    <script src="../../custom-element/custom-element.js" type="module"></script>
+    <style>
+        @import "../angular.css";
+        @import "../material.css";
+        @import "../theme/semantic.css";
+        @import "../theme/consumer-theme.css";
+        @import "../demo.css";
+        main{
+            display: flex; flex-wrap: wrap;
+            gap: 3rem;
+            padding: 5rem;
+            &>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="description"] dd{ padding: 0; }
+            }
+            var{ color: darkgreen; font-weight: bold; }
+        }
+        cem-icon{ margin: 1rem; }
+    </style>
+    <script type="module" src="./colors.js"></script>
+</head>
+<!--
+ToDO
+* docs w/ how to use
+-->
+<body>
+
+<main>
+
+<section>
+    <custom-element>
+        <template>
+            <style>
+                header{ display: flex; gap: 2rem; align-items: center; label{ display: flex;}}
+            </style>
+            <variable name="cem-emotions">
+                <option value="comfort"       warmth="cool"    sample="white"  system="Canvas"     text="CanvasText"    >light scene color, the scene is full of object &#10; Purity, innocence, cleanliness, peace,  coldness or emptiness </option>
+                <option value="calm"          warmth="cool"    sample="black"  system="CanvasText" text="Canvas"        >dark scene color, few objects around           &#10; Mystery, elegance, power, evil, mourning, formality, security  </option>
+                <option value="trust"         warmth="cool"    sample="blue"   system="Highlight"  text="HighlightText" >primary action background, text color for `focus-invert`             </option>
+                <option value="danger"        warmth="warm"    sample="red"    system="red"        text="CanvasText"    >Passion, excitement, love, anger, energy, danger                     </option>
+                <option value="creativity"    warmth="cool"    sample="cyan"   system="ButtonFace" text="ButtonText"    >Luxury, creativity, royalty, mystery, but also grief or melancholy   </option>
+                <option value="enthusiasm"    warmth="warm"    sample="orange" system="Mark"       text="MarkText"      >Warmth, enthusiasm, happiness, optimism, energy                      </option>
+                <option value="conservative"  warmth="neutral" sample="brown"  system="GrayText"   text="CanvasText"    >Natural, earthy, conservative, but also bland or boring              </option>
+            </variable>
+            <variable name="cem-media" select="//*[starts-with(./*/@dce-object-name, '--cem-palette-')]"></variable>
+
+//*[starts-with(./*/@dce-object-name, '--cem-palette-')] {//*[starts-with(./*/@dce-object-name, '--cem-palette-')]} <br/>
+count (//*[starts-with(./*/@dce-object-name, '--cem-palette-')]) { count (//*[starts-with(./*/@dce-object-name, '--cem-palette-')]) } <br/>
+count (//*[@dce-object-name]) { count (//*[@dce-object-name])  } <br/>
+  (//*[@dce-object-name]) {   (//*[@dce-object-name])/@dce-object-name } <br/>
+            <cem-css-rules slice="rules"></cem-css-rules>
+
+            <h1>Base cem-palette tokens </h1>
+            <xhtml:table>
+                <xhtml:thead>
+                    <xhtml:tr>
+                        <xhtml:th > </xhtml:th>
+                        <for-each select="exsl:node-set($cem-emotions)/*">
+                            <xhtml:th style="min-width:6rem">{@value}</xhtml:th>
+                        </for-each>
+                    </xhtml:tr>
+                </xhtml:thead>
+                <xhtml:tbody>
+                <for-each select="$cem-media">
+                    <xhtml:tr>
+                        <variable name="media" select="."></variable>
+                        <xhtml:td>{@dce-object-name}</xhtml:td>
+                        <for-each select="exsl:node-set($cem-emotions)/*">
+                            <variable name="css-background-name" select=" concat('--cem-palette-', @value) "></variable>
+                            <variable name="css-text-name" select=" concat(concat('--cem-palette-', @value), '-text') "></variable>
+                            <xhtml:td style="
+                                        background-color: { $media/*[@dce-object-name = $css-background-name ]};
+                                        color: { $media/*[@dce-object-name = $css-text-name ]};
+                                        font-size:x-small;
+                                        padding:0.5em"
+                                        title="
+{$css-background-name}: {$media/*[@dce-object-name = $css-background-name ]}
+{$css-text-name}: { $media/*[@dce-object-name = $css-text-name ]}
+{@value} : {.}"
+                                >{$media/*[@dce-object-name = $css-background-name ]}
+                            <br/>
+                                { $media/*[@dce-object-name = $css-text-name ]}
+                            </xhtml:td>
+                        </for-each>
+                    </xhtml:tr>
+                </for-each>
+                </xhtml:tbody>
+            </xhtml:table>
+            {count($cem-media)}
+        </template>
+    </custom-element>
+
+</section>
+
+</main>
+</body>
+</html>

package/src/material/theme/theme-data.css

@@ -0,0 +1,43 @@
+
+datalist {
+    display: block;
+
+    option::before {
+        content: attr(value) " ";
+        font-weight: bold;
+        font-family: monospace;
+        color: var(--cem-palette-creativity-x)
+    }
+}
+
+.with-color {
+    option {
+        color: var(--cem-palette-comfort-text);
+        &::before {
+            color: var(--cem-palette-comfort-text);
+        }
+
+        &:nth-child(3), &:last-of-type {
+            color: var(--cem-palette-comfort-text-x);
+            &::before {
+                color: var(--cem-palette-comfort-text-x);
+            }
+        }
+    }
+}
+
+figcaption {
+    font-weight: bolder;
+    background-color: var(--cem-palette-creativity);
+    color: var(--cem-palette-creativity-text);
+    padding: 1rem;
+}
+
+code {
+    font-family: monospace;
+    color: var(--cem-palette-creativity-text);
+    background-color: var(--cem-palette-creativity);
+    padding: 0 0.5rem;
+    font-weight: bold;
+}
+th,td{ padding: 0 0.5rem; }