2026-11-09

XHR by CEM, The data request API made right.

The theory and practical way.


 

An HTTP response, a local file, and a string supplied by an application all enter CEM through the same import boundary. CEM-ML selects the parser for the input format, decodes the source, and builds a typed document tree. The shared importer supports XML and JSON alongside YAML, CSV, HTML, CSS, and formats such as SVG and MathML. Each format keeps its own semantics. A CSV field remains text until a query casts it, while XML elements retain their namespaces. CEM-QL, XPath, and templates use the same node interface across formats. CEM data import

Streaming starts with the bytes. CEM’s <http-request> loader reads the response body in chunks when the transport supports it. Request metadata can reach the template while the body is still arriving. Today, the loader collects the body within a configured byte limit, then imports and publishes the complete CEM document. The next stage in the design is to expose validated parser events as they arrive. A template could then render rows in source order, while an operation like sorting the entire result would still need to wait for the full input. Loader contract · Resource and AST stream lifecycle

Source maps keep the connection to the input. Imported nodes carry their source identity and ranges, so a query can return a decoded value while tooling can still locate the original text. For example, selecting a field from a CSV feed can preserve the location of that field in the response. The rendering design extends that trace in two directions, back to the data that supplied a displayed value and back to the template expression that placed it there. Imported-node provenance is available today. Full tracing from rendered DOM to response ranges is a design goal. Import provenance · Source maps for HTTP data

2025-12-23

Consumer Semantic Theme reached 110% coverage of Material Design tokens.

Besides M3 tokens, it also covers container based responsive layout and speech tokens. 

Damn proud of myself 😜 

And sincere gratitude 🙏 to ChatGPT and Claude Code products. Without them—and without taking dollars out of my family budget—this would have taken a year (or years) instead of a month.

Next up: Theme Builder…
github.com/EPA-WG/custom-element-dist/blob/develop/src/material/theme/tokens/cem-m3-parity.md




2025-12-20

Continue to work on Consumer Semnatic Theme principles...

Stroke thickness is allowed to vary *by density mode* as a **non-breaking** adjustment, as long as semantics stay intact:

- Dense UI may need **stronger strokes** because small targets and reduced whitespace reduce separability.
- Comfort UI can remain at hairline boundaries in more places because whitespace carries part of the separation work.


So far the ChatGPT is the best in analythics and taxonomy creation, while Claude Code in formalizing the MD documents.

Here is an example: https://github.com/EPA-WG/custom-element-dist/blob/develop/src/material/theme/tokens/cem-shape.md

2025-07-09

 Work in progress. Only "explicit actions", i.e. "normal buttons" background and text colors implemented.

Hover by mouse over headings for description.  


Theme cem-theme-light

explicitprimarycontextualalternatedestructive
disabled--cem-action-explicit-disabled-background
--cem-action-explicit-disabled-color
--cem-action-primary-disabled-background
--cem-action-primary-disabled-color
--cem-action-contextual-disabled-background
--cem-action-contextual-disabled-color
--cem-action-alternate-disabled-background
--cem-action-alternate-disabled-color
--cem-action-destructive-disabled-background
--cem-action-destructive-disabled-color
readonly--cem-action-explicit-readonly-background
--cem-action-explicit-readonly-color
--cem-action-primary-readonly-background
--cem-action-primary-readonly-color
--cem-action-contextual-readonly-background
--cem-action-contextual-readonly-color
--cem-action-alternate-readonly-background
--cem-action-alternate-readonly-color
--cem-action-destructive-readonly-background
--cem-action-destructive-readonly-color
editable--cem-action-explicit-editable-background
--cem-action-explicit-editable-color
--cem-action-primary-editable-background
--cem-action-primary-editable-color
--cem-action-contextual-editable-background
--cem-action-contextual-editable-color
--cem-action-alternate-editable-background
--cem-action-alternate-editable-color
--cem-action-destructive-editable-background
--cem-action-destructive-editable-color
required--cem-action-explicit-required-background
--cem-action-explicit-required-color
--cem-action-primary-required-background
--cem-action-primary-required-color
--cem-action-contextual-required-background
--cem-action-contextual-required-color
--cem-action-alternate-required-background
--cem-action-alternate-required-color
--cem-action-destructive-required-background
--cem-action-destructive-required-color
default--cem-action-explicit-default-background
--cem-action-explicit-default-color
--cem-action-primary-default-background
--cem-action-primary-default-color
--cem-action-contextual-default-background
--cem-action-contextual-default-color
--cem-action-alternate-default-background
--cem-action-alternate-default-color
--cem-action-destructive-default-background
--cem-action-destructive-default-color
indeterminate--cem-action-explicit-indeterminate-background
--cem-action-explicit-indeterminate-color
--cem-action-primary-indeterminate-background
--cem-action-primary-indeterminate-color
--cem-action-contextual-indeterminate-background
--cem-action-contextual-indeterminate-color
--cem-action-alternate-indeterminate-background
--cem-action-alternate-indeterminate-color
--cem-action-destructive-indeterminate-background
--cem-action-destructive-indeterminate-color
target--cem-action-explicit-target-background
--cem-action-explicit-target-color
--cem-action-primary-target-background
--cem-action-primary-target-color
--cem-action-contextual-target-background
--cem-action-contextual-target-color
--cem-action-alternate-target-background
--cem-action-alternate-target-color
--cem-action-destructive-target-background
--cem-action-destructive-target-color
focus--cem-action-explicit-focus-background
--cem-action-explicit-focus-color
--cem-action-primary-focus-background
--cem-action-primary-focus-color
--cem-action-contextual-focus-background
--cem-action-contextual-focus-color
--cem-action-alternate-focus-background
--cem-action-alternate-focus-color
--cem-action-destructive-focus-background
--cem-action-destructive-focus-color
hover--cem-action-explicit-hover-background
--cem-action-explicit-hover-color
--cem-action-primary-hover-background
--cem-action-primary-hover-color
--cem-action-contextual-hover-background
--cem-action-contextual-hover-color
--cem-action-alternate-hover-background
--cem-action-alternate-hover-color
--cem-action-destructive-hover-background
--cem-action-destructive-hover-color
selected--cem-action-explicit-selected-background
--cem-action-explicit-selected-color
--cem-action-primary-selected-background
--cem-action-primary-selected-color
--cem-action-contextual-selected-background
--cem-action-contextual-selected-color
--cem-action-alternate-selected-background
--cem-action-alternate-selected-color
--cem-action-destructive-selected-background
--cem-action-destructive-selected-color
active--cem-action-explicit-active-background
--cem-action-explicit-active-color
--cem-action-primary-active-background
--cem-action-primary-active-color
--cem-action-contextual-active-background
--cem-action-contextual-active-color
--cem-action-alternate-active-background
--cem-action-alternate-active-color
--cem-action-destructive-active-background
--cem-action-destructive-active-color
pending--cem-action-explicit-pending-background
--cem-action-explicit-pending-color
--cem-action-primary-pending-background
--cem-action-primary-pending-color
--cem-action-contextual-pending-background
--cem-action-contextual-pending-color
--cem-action-alternate-pending-background
--cem-action-alternate-pending-color
--cem-action-destructive-pending-background
--cem-action-destructive-pending-color

2025-06-28

Consumer Semantic theme design with AI



 https://www.linkedin.com/pulse/consumer-semantic-theme-design-ai-sasha-firsov-iy5pc

It is often difficult to find partnets on rare subjects and ideas which is not (yet?) popular. AI become a handy tool in bottle neck of communication limit. Here is a session for naming convension for Cunsumer-centric vocabulary UI theme. The result is a part of Semantic Theme for <custom-element>, a no-JS web app development stack.

2025-04-21

UX Design Token source of truth

Design Tokens

( Figma tokens help image ) 

Trying to keep the UX design tokens type checked to ensure the each token in theme variation is overridden and uses proper value types. JSON version or figma  does not allow to keep such checks. In C++ or Java you can define the interface and initialize the abstract fields in implementation. TypeScript has a bit similar approach of interface and object of its type.

TS and Java are given an API to access those programmatically and generate as token JSON as HTML docs for those. TS is part of UI devs stack ...

On another hand, modern CSS allows to create the tokens hierarchy as nested classes. And DX is definitely more UI devx friendly. The integrity can be checked as by IDE as by utilities along with other checks like ADA colors compliance.

Design Tokens Figma plugin has a great DX and UI with remote JSON integration but does not have an integrity checks.


For with much wisdom comes much sorrow...

#DesignToken  #WebDesign #WebDev 

2025-04-07

7 UX design tokens


The significance of seven seems to cross cultural, spiritual, and practical domains. 7 notes, 7 colors of rainbow, 7 deadly sins, 7 days of the week… The 2 power 7 (128 ) is the number of phonemes in most of human languages .


The number seven seems to have a fascinating connection to human cognition, and there are a few key theories to explain why it might feel "optimal" or special:

  1. Short-term Memory Capacity: Renowned cognitive psychologist George Miller suggested in his classic 1956 paper The Magical Number Seven, Plus or Minus Two that the human mind has a capacity to handle about seven items in short-term memory. This limitation might explain why lists, groupings, or concepts of seven feel manageable and memorable.

  2. Pattern Recognition: Seven strikes a balance between simplicity and complexity—it’s just enough to challenge our cognitive abilities without overwhelming them. Whether it's musical notes or colors in a rainbow, seven offers variety but avoids excess.

  3. Cultural Reinforcement: Over centuries, the symbolic and spiritual significance of seven has been ingrained into human society. This ubiquity may make our minds naturally attuned to recognizing and organizing concepts in groups of seven.

Does this strike a chord with you? Or do you think there's another layer to seven's mystique?

The HTML5 have given a 7 as a magic count for variations of web safe fonts, font size, font weight, font variant, font variant caps.


In UX in order to have a clear distinction on variations of theme entity, the number of variations need to be limited and the “distance” between variations maximized for better visual recognition of each especially when those shown next to each other. The seven variations is the golden rule there.

Image source