@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
  1. package/.yarn/install-state.gz +0 -0
  2. package/AGENTS.md +1 -0
  3. package/CLAUDE.md +89 -0
  4. package/README.md +5 -5
  5. package/bin/postinstall.sh +12 -9
  6. package/coverage/base.css +224 -0
  7. package/coverage/block-navigation.js +87 -0
  8. package/coverage/coverage-final.json +12 -0
  9. package/coverage/favicon.png +0 -0
  10. package/coverage/index.html +176 -0
  11. package/coverage/prettify.css +1 -0
  12. package/coverage/prettify.js +2 -0
  13. package/coverage/sort-arrow-sprite.png +0 -0
  14. package/coverage/sorter.js +210 -0
  15. package/coverage/src/coverage.svg +10 -0
  16. package/coverage/src/custom-element/coverage.svg +10 -0
  17. package/coverage/src/custom-element/custom-element.js/coverage.svg +10 -0
  18. package/coverage/src/custom-element/custom-element.js.html +3058 -0
  19. package/coverage/src/custom-element/http-request.js/coverage.svg +10 -0
  20. package/coverage/src/custom-element/http-request.js.html +373 -0
  21. package/coverage/src/custom-element/index.html +176 -0
  22. package/coverage/src/custom-element/local-storage.js/coverage.svg +10 -0
  23. package/coverage/src/custom-element/local-storage.js.html +361 -0
  24. package/coverage/src/custom-element/location-element.js/coverage.svg +10 -0
  25. package/coverage/src/custom-element/location-element.js.html +412 -0
  26. package/coverage/src/custom-element/module-url.js/coverage.svg +10 -0
  27. package/coverage/src/custom-element/module-url.js.html +187 -0
  28. package/coverage/src/index.html +116 -0
  29. package/coverage/src/material/theme/colors.js/coverage.svg +10 -0
  30. package/coverage/src/material/theme/colors.js.html +217 -0
  31. package/coverage/src/material/theme/coverage.svg +10 -0
  32. package/coverage/src/material/theme/index.html +116 -0
  33. package/coverage/src/mocks/coverage.svg +10 -0
  34. package/coverage/src/mocks/handlers.ts/coverage.svg +10 -0
  35. package/coverage/src/mocks/handlers.ts.html +196 -0
  36. package/coverage/src/mocks/index.html +116 -0
  37. package/coverage/src/stories/coverage.svg +10 -0
  38. package/coverage/src/stories/frame.canvas.ts/coverage.svg +10 -0
  39. package/coverage/src/stories/frame.canvas.ts.html +217 -0
  40. package/coverage/src/stories/http-request.stories.ts/coverage.svg +10 -0
  41. package/coverage/src/stories/http-request.stories.ts.html +820 -0
  42. package/coverage/src/stories/index.html +146 -0
  43. package/coverage/src/stories/testStoryBook.ts/coverage.svg +10 -0
  44. package/coverage/src/stories/testStoryBook.ts.html +160 -0
  45. package/coverage/src/sum.ts/coverage.svg +10 -0
  46. package/coverage/src/sum.ts.html +94 -0
  47. package/dist/{custom-element-BqBcmDiN.js → custom-element-Cr_I3Xd-.js} +69 -65
  48. package/dist/custom-element-D5IF46oF.cjs +97 -0
  49. package/dist/custom-element-bundle.cjs +1 -1
  50. package/dist/custom-element-bundle.js +3 -3
  51. package/dist/demo/a.html +41 -64
  52. package/dist/demo/s.xslt +94 -350
  53. package/dist/{local-storage-DzmNKzgN.js → local-storage-w0k66UWM.js} +4 -4
  54. package/package.json +3 -2
  55. package/public/demo/a.html +41 -64
  56. package/public/demo/s.xslt +94 -350
  57. package/src/custom-element/custom-element.js +9 -4
  58. package/src/custom-element/demo/a.html +41 -64
  59. package/src/custom-element/demo/s.xslt +94 -350
  60. package/src/custom-element/ide/customData-dce.json +8 -8
  61. package/src/custom-element/ide/web-types-dce.json +8 -8
  62. package/src/custom-element/ide/web-types-xsl.json +1 -1
  63. package/src/material/components/action.html +77 -22
  64. package/src/material/components/autocomplete.html +7 -6
  65. package/src/material/components/badge.html +33 -34
  66. package/src/material/components/cem-theme-components.css +131 -0
  67. package/src/material/components/dropdown.html +27 -12
  68. package/src/material/components/icon-link.html +25 -18
  69. package/src/material/components/icon.html +15 -14
  70. package/src/material/components/input.html +27 -24
  71. package/src/material/components/menu.html +23 -18
  72. package/src/material/components.html +19 -18
  73. package/src/material/demo.css +24 -12
  74. package/src/material/index.html +15 -9
  75. package/src/material/theme/consumer-theme.css +0 -733
  76. package/src/material/theme/semantic.css +1 -85
  77. package/src/mocks/versions.mock.ts +1 -1
  78. package/src/stories/__screenshots__/http-request.test.ts/http-request-url-change-1.png +0 -0
  79. package/src/stories/__screenshots__/location-element.test.stories.ts/location-element-location-element-Demo-1.png +0 -0
  80. package/src/stories/frame.canvas.ts +17 -4
  81. package/src/stories/testStoryBook.ts +2 -5
  82. package/storybook-static/assets/{Color-F6OSRLHC-FZZzFn7T.js → Color-F6OSRLHC-CGlEPECH.js} +1 -1
  83. package/storybook-static/assets/{Configure-DyfktOJO.js → Configure-RleqRiQ0.js} +1 -1
  84. package/storybook-static/assets/{DocsRenderer-CFRXHY34-5isVpCzj.js → DocsRenderer-CFRXHY34-Bz2y61tp.js} +2 -2
  85. package/storybook-static/assets/{attributes.test.stories-CrDC-RXf.js → attributes.test.stories-Bs0zZtYO.js} +1 -1
  86. package/storybook-static/assets/{css.test.stories-ChWnZJwa.js → css.test.stories-CK4N9Fqq.js} +1 -1
  87. package/storybook-static/assets/custom-element-PxTx2W9y.js +97 -0
  88. package/storybook-static/assets/{dom-merge.test.stories-DkarPqD_.js → dom-merge.test.stories-DLFviA8F.js} +1 -1
  89. package/storybook-static/assets/{external-template.test.stories-DCboR8sG.js → external-template.test.stories-CqR1aaHv.js} +1 -1
  90. package/storybook-static/assets/{form.test.stories-BjeeUu0b.js → form.test.stories-Cinvg_DI.js} +1 -1
  91. package/storybook-static/assets/frame.canvas-BB4_DNn6.js +1 -0
  92. package/storybook-static/assets/handlers-CxSWbsdK.js +291 -0
  93. package/storybook-static/assets/{http-request.stories-WIldq1MC.js → http-request.stories-_1_UMvj-.js} +1 -1
  94. package/storybook-static/assets/{iframe-CBHPj1E5.js → iframe-fXv0bS2C.js} +2 -2
  95. package/storybook-static/assets/{index-BL0FQnAE.js → index-Dm-gke4Y.js} +3 -3
  96. package/storybook-static/assets/{index-CzwPLrca.js → index-DxjDM4Ny.js} +1 -1
  97. package/storybook-static/assets/{local-storage.test.stories-DLMK0p2s.js → local-storage.test.stories-M4WOSQC5.js} +1 -1
  98. package/storybook-static/assets/{location-element.test.stories-BroqoLMS.js → location-element.test.stories-Ce6Ma8hE.js} +1 -1
  99. package/storybook-static/assets/{module-url.test.stories-B-0dibET.js → module-url.test.stories-PwnZWqKL.js} +1 -1
  100. package/storybook-static/assets/{preview-BG24UPL5.js → preview-Dq4-5PA5.js} +2 -2
  101. package/storybook-static/assets/{preview-C1KnQPMW.js → preview-kbHljohz.js} +1 -1
  102. package/storybook-static/assets/{set-url.test.stories-Dhq4YQyr.js → set-url.test.stories-BdNTYEwI.js} +1 -1
  103. package/storybook-static/assets/{slice-events.test.stories-BZJGIFku.js → slice-events.test.stories-BdvLtK0h.js} +1 -1
  104. package/storybook-static/assets/{slots.test.stories-DKivHwZH.js → slots.test.stories-CoTPvRog.js} +1 -1
  105. package/storybook-static/assets/{version-select.test.stories-Dntyd7qb.js → version-select.test.stories-hs-HsDVE.js} +1 -1
  106. package/storybook-static/assets/{xslt-conditionals.test.stories-Iq5iQNRj.js → xslt-conditionals.test.stories-C4oXVQWa.js} +1 -1
  107. package/storybook-static/assets/{xslt-for-each.test.stories-BMygBmj8.js → xslt-for-each.test.stories-Da4vCZe1.js} +1 -1
  108. package/storybook-static/assets/{xslt-if.test.stories-CVrFWdAX.js → xslt-if.test.stories-CMlnBGX2.js} +1 -1
  109. package/storybook-static/demo/a.html +41 -64
  110. package/storybook-static/demo/s.xslt +94 -350
  111. package/storybook-static/iframe.html +1 -1
  112. package/storybook-static/project.json +1 -1
  113. package/dist/custom-element-jpOyXHF6.cjs +0 -97
  114. package/storybook-static/assets/custom-element-wuk8gYiP.js +0 -97
  115. package/storybook-static/assets/frame.canvas-E5n9h6j1.js +0 -1
  116. package/storybook-static/assets/handlers-B7UMnC7v.js +0 -291
package/src/material/theme/consumer-theme.css CHANGED
@@ -9,737 +9,4 @@
9
9
  :root {
10
10
  --cem-animation-speed: 3s; /* animation has 2 phases 1.5s each */
11
11
 
12
- /* region custom-element material branded colors */
13
-
14
- --cem-color-cyan-xl : #f1fefe; /* light cyan | ??? off creativity | reading bg | --ng-cyan-?99 */
15
- --cem-color-cyan-l : #00fbfb; /* dark cyan | ??? off creativity | reading bg | --ng-cyan-90 */
16
- --cem-color-cyan-d : #006a6a; /* light cyan | ??? off creativity | reading bg | --ng-cyan-40 */
17
- --cem-color-cyan-xd : #001010; /* dark cyan | ??? off creativity | reading bg | --ng-cyan-?5 */
18
-
19
- --cem-color-blue-xl : #faf9fd; /* lightest blue | `comfort`, light scene | attention | --ng-azure-neutral-98 */
20
- --cem-color-blue-l : #d7e3ff; /* blue | trust | attention | --ng-azure-90 */
21
- --cem-color-blue-d : #002f65; /* blue | trust | attention | --ng-azure-20 */
22
- --cem-color-blue-xd : #1a1b1f; /* darkest blue | `comfort`, dark scene | attention | --ng-azure-neutral-10 */
23
-
24
- --cem-color-red-xl : #ffb4ab; /* red light | danger | alert | --ng-error-80 */
25
- --cem-color-red-l : #ba1a1a; /* red xlight | danger | alert | --ng-error-60 */
26
- --cem-color-red-d : #690005; /* red dark | danger | alert | --ng-error-20 */
27
- --cem-color-red-xd : #410002; /* red xdark | danger | alert | --ng-error-10 */
28
-
29
- --cem-color-purple-xl : #f3e5f5; /* purple xlight | creativity | brand-1 | --mat-purple-50 */
30
- --cem-color-purple-l : #e1bee7; /* purple light | creativity | brand-1 | --mat-purple-100 */
31
- --cem-color-purple-d : #6a1b9a; /* purple dark | creativity | brand-1 | --mat-purple-800 */
32
- --cem-color-purple-xd : #4a148c; /* purple xdark | creativity | brand-1 | --mat-purple-900 */
33
-
34
- --cem-color-orange-xl : #f0f070; /* dark yellow | ?? | brand-2 | --ng-yellow-??80 */
35
- --cem-color-orange-l : #ffe082; /* light orange | enthusiasm | brand-2 | --mat-amber-200 */
36
- --cem-color-orange-d : #723600; /* dark orange | enthusiasm hype | brand-2 | --ng-orange-30 */
37
- --cem-color-orange-xd : #502400; /* dark yellow | ?? | brand-2 | --ng-orange-20 */
38
-
39
- --cem-color-brown-xl : #d7ccc8; /* brown xlight | conservative | brand-3 | --mat-brown-100 */
40
- --cem-color-brown-l : #a1887f; /* brown light | conservative | brand-3 | --mat-brown-300 */
41
- --cem-color-brown-d : #4e342e; /* brown dark | conservative | brand-3 | --mat-brown-800 */
42
- --cem-color-brown-xd : #3e2723; /* brown xdark | conservative | brand-3 | --mat-brown-900 */
43
-
44
- --cem-color-grey-l : #f1f1eb; /* light grey | ??? conservative | ??? brand-1 | --ng-green-neutral-80 */
45
- --cem-color-grey-d : #1a1c18; /* dark grey | ??? conservative | ??? brand-1 | --ng-green-neutral-10 */
46
-
47
-
48
-
49
- /* endregion custom-element material branded colors */
50
-
51
-
52
-
53
- /*
54
- # Emotional Palette
55
-
56
- | `palette-` token | | warmth | sample | system |
57
- |------------------|--------------------------------------------------------------------|---------|-------------------------|----------------------------|
58
- | `comfort` | light scene color, the scene is full of object | cool | cyan/white | Canvas |
59
- | | Purity, innocence, cleanliness, peace, coldness or emptiness | | | |
60
- | `calm` | dark scene color, few objects around | cool | cyan/black | CanvasText |
61
- | | Mystery, elegance, power, evil, mourning, formality, security | | | |
62
- | `trust` | primary action background, text color for `focus-invert` | cool | blue | Highlight w/ HighlightText |
63
- | `danger` | Passion, excitement, love, anger, energy, danger | warm | red | N/A |
64
- | `creativity` | Luxury, creativity, royalty, mystery, but also grief or melancholy | cool | purple | ButtonFace w/ ButtonText |
65
- | `enthusiasm` | Warmth, enthusiasm, happiness, optimism, energy | warm | orange( yellow, pink) | Mark w/ MarkText |
66
- | `conservative` | Natural, earthy, conservative, but also bland or boring | neutral | brown (tan/beige, grey) | GrayText |
67
-
68
- */
69
-
70
- /* region default rules matching light/dark theme, light dark */
71
- --cem-palette-comfort : light-dark(var( --cem-color-cyan-xl ), var( --cem-color-cyan-xd ));
72
- --cem-palette-comfort-text : light-dark(var( --cem-color-cyan-xd ), var( --cem-color-cyan-xl ));
73
- --cem-palette-comfort-x : light-dark(var( --cem-color-cyan-xd ), var( --cem-color-cyan-xl ));
74
- --cem-palette-comfort-text-x : light-dark(var( --cem-color-cyan-xl ), var( --cem-color-cyan-xd ));
75
-
76
- --cem-palette-calm : light-dark(var( --cem-color-cyan-l ), var( --cem-color-cyan-d ));
77
- --cem-palette-calm-text : var( --cem-palette-comfort-text );
78
- --cem-palette-calm-x : light-dark(var( --cem-color-cyan-d ), var( --cem-color-cyan-l ));
79
- --cem-palette-calm-text-x : var( --cem-palette-comfort-text-x );
80
-
81
- --cem-palette-trust : light-dark(var( --cem-color-blue-l ), var( --cem-color-blue-d ));
82
- --cem-palette-trust-text : light-dark(var( --cem-palette-comfort-text ), white );
83
- --cem-palette-trust-x : light-dark(var( --cem-color-blue-d ), var( --cem-color-blue-l ));
84
- --cem-palette-trust-text-x : var( --cem-palette-comfort-text-x );
85
-
86
- --cem-palette-danger : light-dark(var( --cem-color-red-l ), var( --cem-color-red-d ));
87
- --cem-palette-danger-text : light-dark(var( --cem-palette-comfort-text-x ), var( --cem-palette-comfort-text ));
88
- --cem-palette-danger-x : light-dark(var( --cem-color-red-d ), var( --cem-color-red-l ));
89
- --cem-palette-danger-text-x : light-dark(var( --cem-color-orange-xl ), var( --cem-color-orange-xl ));
90
-
91
- --cem-palette-creativity : light-dark(var( --cem-color-purple-l ), var( --cem-color-purple-d ));
92
- --cem-palette-creativity-text : var( --cem-palette-comfort-text );
93
- --cem-palette-creativity-x : light-dark(var( --cem-color-purple-d ), var( --cem-color-purple-l ));
94
- --cem-palette-creativity-text-x : var( --cem-palette-comfort-text-x );
95
-
96
- --cem-palette-enthusiasm : light-dark(var( --cem-color-orange-l ), var( --cem-color-orange-d ));
97
- --cem-palette-enthusiasm-text : light-dark(var( --cem-palette-comfort-text ), white );
98
- --cem-palette-enthusiasm-x : light-dark(var( --cem-color-orange-xd ), var( --cem-color-orange-xl ));
99
- --cem-palette-enthusiasm-text-x : var( --cem-palette-comfort-text-x );
100
-
101
- --cem-palette-conservative : light-dark(var( --cem-color-grey-l ), var( --cem-color-grey-d ));
102
- --cem-palette-conservative-text : var( --cem-palette-comfort-text );
103
- --cem-palette-conservative-x : light-dark(var( --cem-color-grey-d ), var( --cem-color-grey-l ));
104
- --cem-palette-conservative-text-x : var( --cem-palette-comfort-text-x );
105
- /* endregion */
106
-
107
- /* region zebra colors for focus/selected/target outlines */
108
- --cem-zebra-color-0: Canvas;
109
- --cem-zebra-color-1: Canvas;
110
- --cem-zebra-color-2: Canvas;
111
- --cem-zebra-color-3: Canvas;
112
-
113
- /* outline for focus, selected, target */
114
- &[focus],&:focus, &:focus-visible, &:focus-within, &.focus,
115
- &[target], &:target, /*&:target-within, */ &.target ,
116
- &[selected],&.selected{
117
- --cem-action-box-shadow:
118
- 0 0 0 2px var(--cem-zebra-color-1),
119
- 0 0 0 4px var(--cem-zebra-color-2),
120
- 0 0 0 6px var(--cem-zebra-color-3);
121
- }
122
- /* endregion */
123
-
124
-
125
- /* common for cem themes */
126
- [data-theme*="cem-theme-"],
127
- .cem-theme-light,
128
- .cem-theme-dark
129
- {
130
- background-color: var(--cem-palette-comfort, Canvas );
131
- color: var(--cem-palette-comfort-text, CanvasText);
132
-
133
-
134
- /* region disabled */
135
- --cem-action-explicit-disabled-background : color-mix(in srgb, var(--cem-palette-creativity ) 30%, var(--cem-palette-conservative-x )); --cem-action-explicit-disabled-text : var(--cem-palette-conservative-text-x );
136
- --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 );
137
- --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 );
138
- --cem-action-alternate-disabled-background : color-mix(in srgb, var(--cem-palette-enthusiasm ) 30%, var(--cem-palette-conservative-x )); --cem-action-alternate-disabled-text : var(--cem-palette-conservative-text-x );
139
- --cem-action-destructive-disabled-background : color-mix(in srgb, var(--cem-palette-danger ) 30%, var(--cem-palette-conservative-x )); --cem-action-destructive-disabled-text: var(--cem-palette-conservative-text-x );
140
- /* endregion */
141
-
142
- /* region readonly */
143
- --cem-action-explicit-readonly-background : color-mix(in srgb, var(--cem-palette-creativity ) 80%, var(--cem-palette-creativity-x )); --cem-action-explicit-readonly-text : var(--cem-palette-creativity-text );
144
- --cem-action-primary-readonly-background : color-mix(in srgb, var(--cem-palette-trust ) 80%, var(--cem-palette-trust-x )); --cem-action-primary-readonly-text : var(--cem-palette-trust-text );
145
- --cem-action-contextual-readonly-background : color-mix(in srgb, var(--cem-palette-comfort ) 80%, var(--cem-palette-comfort-x )); --cem-action-contextual-readonly-text : var(--cem-palette-comfort-text );
146
- --cem-action-alternate-readonly-background : color-mix(in srgb, var(--cem-palette-enthusiasm ) 80%, var(--cem-palette-enthusiasm-x )); --cem-action-alternate-readonly-text : var(--cem-palette-enthusiasm-text );
147
- --cem-action-destructive-readonly-background : color-mix(in srgb, var(--cem-palette-danger ) 80%, var(--cem-palette-danger-x )); --cem-action-destructive-readonly-text: var(--cem-palette-danger-text );
148
- /* endregion */
149
-
150
- /* region editable */
151
- --cem-action-explicit-editable-background : color-mix(in srgb, var(--cem-palette-creativity ) 90%, var(--cem-palette-creativity-x )); --cem-action-explicit-editable-text : var(--cem-palette-creativity-text );
152
- --cem-action-primary-editable-background : color-mix(in srgb, var(--cem-palette-trust ) 90%, var(--cem-palette-trust-x )); --cem-action-primary-editable-text : var(--cem-palette-trust-text );
153
- --cem-action-contextual-editable-background : color-mix(in srgb, var(--cem-palette-comfort ) 90%, var(--cem-palette-comfort-x )); --cem-action-contextual-editable-text : var(--cem-palette-comfort-text );
154
- --cem-action-alternate-editable-background : color-mix(in srgb, var(--cem-palette-enthusiasm ) 90%, var(--cem-palette-enthusiasm-x )); --cem-action-alternate-editable-text : var(--cem-palette-enthusiasm-text );
155
- --cem-action-destructive-editable-background : color-mix(in srgb, var(--cem-palette-danger ) 90%, var(--cem-palette-danger-x )); --cem-action-destructive-editable-text: var(--cem-palette-danger-text );
156
- /* endregion */
157
-
158
- /* region required */
159
- --cem-action-explicit-required-background : var(--cem-palette-creativity ); --cem-action-explicit-required-text : var(--cem-palette-creativity-text );
160
- --cem-action-primary-required-background : var(--cem-palette-trust ); --cem-action-primary-required-text : var(--cem-palette-trust-text );
161
- --cem-action-contextual-required-background : var(--cem-palette-comfort ); --cem-action-contextual-required-text : var(--cem-palette-comfort-text );
162
- --cem-action-alternate-required-background : var(--cem-palette-enthusiasm ); --cem-action-alternate-required-text : var(--cem-palette-enthusiasm-text );
163
- --cem-action-destructive-required-background : var(--cem-palette-danger ); --cem-action-destructive-required-text: var(--cem-palette-danger-text );
164
- /* endregion */
165
-
166
- /* region default */
167
- --cem-action-explicit-default-background : var(--cem-palette-creativity ); --cem-action-explicit-default-text : var(--cem-palette-creativity-text );
168
- --cem-action-primary-default-background : var(--cem-palette-trust ); --cem-action-primary-default-text : var(--cem-palette-trust-text );
169
- --cem-action-contextual-default-background : var(--cem-palette-comfort ); --cem-action-contextual-default-text : var(--cem-palette-comfort-text );
170
- --cem-action-alternate-default-background : var(--cem-palette-enthusiasm ); --cem-action-alternate-default-text : var(--cem-palette-enthusiasm-text );
171
- --cem-action-destructive-default-background : var(--cem-palette-danger ); --cem-action-destructive-default-text: var(--cem-palette-danger-text );
172
- /* endregion */
173
-
174
- /* region indeterminate */
175
- --cem-action-explicit-indeterminate-background : color-mix(in srgb, var(--cem-palette-creativity ) 90%, var(--cem-palette-creativity-x )); --cem-action-explicit-indeterminate-text : var(--cem-palette-creativity-text );
176
- --cem-action-primary-indeterminate-background : color-mix(in srgb, var(--cem-palette-trust ) 90%, var(--cem-palette-trust-x )); --cem-action-primary-indeterminate-text : var(--cem-palette-trust-text );
177
- --cem-action-contextual-indeterminate-background : color-mix(in srgb, var(--cem-palette-comfort ) 90%, var(--cem-palette-comfort-x )); --cem-action-contextual-indeterminate-text : var(--cem-palette-comfort-text );
178
- --cem-action-alternate-indeterminate-background : color-mix(in srgb, var(--cem-palette-enthusiasm ) 90%, var(--cem-palette-enthusiasm-x )); --cem-action-alternate-indeterminate-text : var(--cem-palette-enthusiasm-text );
179
- --cem-action-destructive-indeterminate-background : color-mix(in srgb, var(--cem-palette-danger ) 80%, var(--cem-palette-danger-x )); --cem-action-destructive-indeterminate-text: var(--cem-palette-danger-text );
180
- /* endregion */
181
-
182
- /* region target */
183
- /*--cem-action-explicit-target-background : var(--cem-palette-creativity ); --cem-action-explicit-target-text : var(--cem-palette-creativity-text );*/
184
- /*--cem-action-primary-target-background : var(--cem-palette-trust ); --cem-action-primary-target-text : var(--cem-palette-trust-text );*/
185
- /*--cem-action-contextual-target-background : color-mix(in srgb, var(--cem-palette-comfort ) 80%, var(--cem-palette-comfort-x )); --cem-action-contextual-target-text : var(--cem-palette-comfort-text );*/
186
- /*--cem-action-alternate-target-background : var(--cem-palette-enthusiasm ); --cem-action-alternate-target-text : var(--cem-palette-enthusiasm-text );*/
187
- /*--cem-action-destructive-target-background : var(--cem-palette-danger ); --cem-action-destructive-target-text: var(--cem-palette-danger-text );*/
188
- /* endregion */
189
-
190
- /* region focus */
191
- /*--cem-action-explicit-focus-background : var(--cem-palette-creativity ); --cem-action-explicit-focus-text : var(--cem-palette-creativity-text );*/
192
- /*--cem-action-primary-focus-background : var(--cem-palette-trust ); --cem-action-primary-focus-text : var(--cem-palette-trust-text );*/
193
- /*--cem-action-contextual-focus-background :color-mix(in srgb, var(--cem-palette-comfort ) 70%, var(--cem-palette-comfort-x ));--cem-action-contextual-focus-text : var(--cem-palette-comfort-text );*/
194
- /*--cem-action-alternate-focus-background : var(--cem-palette-enthusiasm ); --cem-action-alternate-focus-text : var(--cem-palette-enthusiasm-text );*/
195
- /*--cem-action-destructive-focus-background : var(--cem-palette-danger ); --cem-action-destructive-focus-text: var(--cem-palette-danger-text );*/
196
- /* endregion */
197
-
198
- /* region hover */
199
- --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 );
200
- --cem-action-primary-hover-background : color-mix(in srgb, var(--cem-palette-trust ) 60%, var(--cem-palette-trust-x )); --cem-action-primary-hover-text : var(--cem-palette-trust-text );
201
- --cem-action-contextual-hover-background : color-mix(in srgb, var(--cem-palette-comfort ) 60%, var(--cem-palette-comfort-x )); --cem-action-contextual-hover-text : var(--cem-palette-comfort-text );
202
- --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 );
203
- --cem-action-destructive-hover-background : color-mix(in srgb, var(--cem-palette-danger ) 60%, var(--cem-palette-danger-x )); --cem-action-destructive-hover-text: var(--cem-palette-danger-text );
204
- /* endregion */
205
-
206
- /* region selected */
207
- /*--cem-action-explicit-selected-background : color-mix(in srgb, var(--cem-palette-creativity ) 35%, var(--cem-palette-creativity-x )); --cem-action-explicit-selected-text : var(--cem-palette-creativity-text-x );*/
208
- /*--cem-action-primary-selected-background : color-mix(in srgb, var(--cem-palette-trust ) 35%, var(--cem-palette-trust-x )); --cem-action-primary-selected-text : var(--cem-palette-trust-text-x );*/
209
- /*--cem-action-contextual-selected-background : color-mix(in srgb, var(--cem-palette-comfort ) 35%, var(--cem-palette-comfort-x )); --cem-action-contextual-selected-text : var(--cem-palette-comfort-text-x );*/
210
- /*--cem-action-alternate-selected-background : color-mix(in srgb, var(--cem-palette-enthusiasm ) 35%, var(--cem-palette-enthusiasm-x )); --cem-action-alternate-selected-text : var(--cem-palette-enthusiasm-text-x );*/
211
- /*--cem-action-destructive-selected-background : color-mix(in srgb, var(--cem-palette-danger ) 35%, var(--cem-palette-danger-x )); --cem-action-destructive-selected-text: var(--cem-palette-danger-text-x );*/
212
- /* endregion */
213
-
214
- /* region active */
215
- --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 );
216
- --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 );
217
- --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 );
218
- --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 );
219
- --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 );
220
- /* endregion */
221
-
222
- /* region pending */
223
- --cem-action-explicit-pending-background : color-mix(in srgb, var(--cem-palette-creativity ) 5%, var(--cem-palette-creativity-x )); --cem-action-explicit-pending-text : var(--cem-palette-creativity-text-x );
224
- --cem-action-primary-pending-background : color-mix(in srgb, var(--cem-palette-trust ) 5%, var(--cem-palette-trust-x )); --cem-action-primary-pending-text : var(--cem-palette-trust-text-x );
225
- --cem-action-contextual-pending-background : color-mix(in srgb, var(--cem-palette-comfort ) 5%, var(--cem-palette-comfort-x )); --cem-action-contextual-pending-text : var(--cem-palette-comfort-text-x );
226
- --cem-action-alternate-pending-background : color-mix(in srgb, var(--cem-palette-enthusiasm ) 5%, var(--cem-palette-enthusiasm-x )); --cem-action-alternate-pending-text : var(--cem-palette-enthusiasm-text-x );
227
- --cem-action-destructive-pending-background : color-mix(in srgb, var(--cem-palette-danger ) 5%, var(--cem-palette-danger-x )); --cem-action-destructive-pending-text: var(--cem-palette-danger-text-x );
228
- /* endregion */
229
-
230
- }
231
-
232
-
233
- .cem-theme-light, [data-theme="cem-theme-light"],.cem-theme-contrast-light, [data-theme="cem-theme-contrast-light"] {
234
- color-scheme: light;
235
- }
236
- .cem-theme-dark, [data-theme*="cem-theme-dark"],.cem-theme-contrast-dark, [data-theme*="cem-theme-contrast-dark"]{
237
- color-scheme: dark;
238
- }
239
-
240
-
241
- .cem-theme-native,[data-theme="cem-theme-native"]{
242
-
243
- /* https://developer.mozilla.org/en-US/docs/Web/CSS/system-color */
244
-
245
- /* region emotional palette */
246
- --cem-palette-comfort : Canvas ;
247
- --cem-palette-comfort-text : CanvasText ;
248
- --cem-palette-comfort-x : CanvasText ;
249
- --cem-palette-comfort-text-x : Canvas ;
250
-
251
- --cem-palette-calm : cyan ;
252
- --cem-palette-calm-text : black ;
253
- --cem-palette-calm-x : darkcyan ;
254
- --cem-palette-calm-text-x : white ;
255
-
256
- --cem-palette-trust : Highlight ;
257
- --cem-palette-trust-text : HighlightText ;
258
- --cem-palette-trust-x : light-dark(color-mix(in srgb, VisitedText 30%, black), color-mix(in srgb, VisitedText 30%, white));
259
- --cem-palette-trust-text-x : Canvas ;
260
-
261
- --cem-palette-danger : red ;
262
- --cem-palette-danger-text : Canvas ;
263
- --cem-palette-danger-x : light-dark(color-mix(in srgb, red 30%, black), color-mix(in srgb, red 30%, white)) ;
264
- --cem-palette-danger-text-x : Canvas ;
265
-
266
- --cem-palette-creativity : ButtonFace ;
267
- --cem-palette-creativity-text : CanvasText ;
268
- --cem-palette-creativity-x : light-dark(color-mix(in srgb, CanvasText 30%, var( purple)), color-mix(in srgb, CanvasText 30%, lightpink)) ;
269
- --cem-palette-creativity-text-x : Canvas ;
270
-
271
- --cem-palette-enthusiasm : Mark ;
272
- --cem-palette-enthusiasm-text : MarkText ;
273
- --cem-palette-enthusiasm-x : light-dark(color-mix(in srgb, Mark 30%, black), color-mix(in srgb, Mark 30%, white));
274
- --cem-palette-enthusiasm-text-x : Canvas ;
275
-
276
- --cem-palette-conservative : ButtonFace ;
277
- --cem-palette-conservative-text : CanvasText ;
278
- --cem-palette-conservative-x : CanvasText ;
279
- --cem-palette-conservative-text-x : Canvas ;
280
- /* endregion */
281
-
282
- /* region disabled */
283
- --cem-action-explicit-disabled-background : color-mix(in srgb, var(--cem-palette-conservative ) 30%, var(--cem-palette-conservative-x )); --cem-action-explicit-disabled-text : var(--cem-palette-conservative-text-x );
284
- --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 );
285
- --cem-action-contextual-disabled-background : buttonface; --cem-action-contextual-disabled-text : GrayText;
286
- --cem-action-alternate-disabled-background : color-mix(in srgb, var(--cem-palette-enthusiasm ) 30%, var(--cem-palette-conservative-x )); --cem-action-alternate-disabled-text : var(--cem-palette-conservative-text-x );
287
- --cem-action-destructive-disabled-background : color-mix(in srgb, var(--cem-palette-danger ) 30%, var(--cem-palette-conservative-x )); --cem-action-destructive-disabled-text: var(--cem-palette-conservative-text-x );
288
- /* endregion */
289
-
290
- /* region readonly */
291
- --cem-action-explicit-readonly-background : color-mix(in srgb, var(--cem-palette-creativity ) 80%, var(--cem-palette-creativity-x )); --cem-action-explicit-readonly-text : var(--cem-palette-creativity-text );
292
- --cem-action-primary-readonly-background : color-mix(in srgb, var(--cem-palette-trust ) 80%, var(--cem-palette-trust-x )); --cem-action-primary-readonly-text : var(--cem-palette-trust-text );
293
- --cem-action-contextual-readonly-background : color-mix(in srgb, var(--cem-palette-comfort ) 80%, var(--cem-palette-comfort-x )); --cem-action-contextual-readonly-text : var(--cem-palette-comfort-text );
294
- --cem-action-alternate-readonly-background : color-mix(in srgb, var(--cem-palette-enthusiasm ) 80%, var(--cem-palette-enthusiasm-x )); --cem-action-alternate-readonly-text : var(--cem-palette-enthusiasm-text );
295
- --cem-action-destructive-readonly-background : color-mix(in srgb, var(--cem-palette-danger ) 80%, var(--cem-palette-danger-x )); --cem-action-destructive-readonly-text: var(--cem-palette-danger-text );
296
- /* endregion */
297
-
298
- /* region editable */
299
- --cem-action-explicit-editable-background : color-mix(in srgb, var(--cem-palette-creativity ) 90%, var(--cem-palette-creativity-x )); --cem-action-explicit-editable-text : var(--cem-palette-creativity-text );
300
- --cem-action-primary-editable-background : color-mix(in srgb, var(--cem-palette-trust ) 90%, var(--cem-palette-trust-x )); --cem-action-primary-editable-text : var(--cem-palette-trust-text );
301
- --cem-action-contextual-editable-background : color-mix(in srgb, var(--cem-palette-comfort ) 90%, var(--cem-palette-comfort-x )); --cem-action-contextual-editable-text : var(--cem-palette-comfort-text );
302
- --cem-action-alternate-editable-background : color-mix(in srgb, var(--cem-palette-enthusiasm ) 90%, var(--cem-palette-enthusiasm-x )); --cem-action-alternate-editable-text : var(--cem-palette-enthusiasm-text );
303
- --cem-action-destructive-editable-background : color-mix(in srgb, var(--cem-palette-danger ) 90%, var(--cem-palette-danger-x )); --cem-action-destructive-editable-text: var(--cem-palette-danger-text );
304
- /* endregion */
305
-
306
- /* region required */
307
- --cem-action-explicit-required-background : var(--cem-palette-creativity ); --cem-action-explicit-required-text : var(--cem-palette-creativity-text );
308
- --cem-action-primary-required-background : var(--cem-palette-trust ); --cem-action-primary-required-text : var(--cem-palette-trust-text );
309
- --cem-action-contextual-required-background : var(--cem-palette-comfort ); --cem-action-contextual-required-text : var(--cem-palette-comfort-text );
310
- --cem-action-alternate-required-background : var(--cem-palette-enthusiasm ); --cem-action-alternate-required-text : var(--cem-palette-enthusiasm-text );
311
- --cem-action-destructive-required-background : var(--cem-palette-danger ); --cem-action-destructive-required-text: var(--cem-palette-danger-text );
312
- /* endregion */
313
-
314
- /* region default */
315
- --cem-action-explicit-default-background : var(--cem-palette-creativity ); --cem-action-explicit-default-text : var(--cem-palette-creativity-text );
316
- --cem-action-primary-default-background : var(--cem-palette-trust ); --cem-action-primary-default-text : var(--cem-palette-trust-text );
317
- --cem-action-contextual-default-background : var(--cem-palette-comfort ); --cem-action-contextual-default-text : var(--cem-palette-comfort-text );
318
- --cem-action-alternate-default-background : var(--cem-palette-enthusiasm ); --cem-action-alternate-default-text : var(--cem-palette-enthusiasm-text );
319
- --cem-action-destructive-default-background : var(--cem-palette-danger ); --cem-action-destructive-default-text: var(--cem-palette-danger-text );
320
- /* endregion */
321
-
322
- /* region indeterminate */
323
- --cem-action-explicit-indeterminate-background : color-mix(in srgb, var(--cem-palette-creativity ) 90%, var(--cem-palette-creativity-x )); --cem-action-explicit-indeterminate-text : var(--cem-palette-creativity-text );
324
- --cem-action-primary-indeterminate-background : color-mix(in srgb, var(--cem-palette-trust ) 90%, var(--cem-palette-trust-x )); --cem-action-primary-indeterminate-text : var(--cem-palette-trust-text );
325
- --cem-action-contextual-indeterminate-background : color-mix(in srgb, var(--cem-palette-comfort ) 90%, var(--cem-palette-comfort-x )); --cem-action-contextual-indeterminate-text : var(--cem-palette-comfort-text );
326
- --cem-action-alternate-indeterminate-background : color-mix(in srgb, var(--cem-palette-enthusiasm ) 90%, var(--cem-palette-enthusiasm-x )); --cem-action-alternate-indeterminate-text : var(--cem-palette-enthusiasm-text );
327
- --cem-action-destructive-indeterminate-background : color-mix(in srgb, var(--cem-palette-danger ) 80%, var(--cem-palette-danger-x )); --cem-action-destructive-indeterminate-text: var(--cem-palette-danger-text );
328
- /* endregion */
329
-
330
- /* region target */
331
- &[target], &:target, /*&:target-within, */ &.target {
332
- --cem-zebra-color-3: SelectedItem;
333
- }
334
-
335
- /*--cem-action-explicit-target-background : var(--cem-palette-creativity ); --cem-action-explicit-target-text : var(--cem-palette-creativity-text );*/
336
- /*--cem-action-primary-target-background : var(--cem-palette-trust ); --cem-action-primary-target-text : var(--cem-palette-trust-text );*/
337
- /*--cem-action-contextual-target-background : var(--cem-palette-comfort ); --cem-action-contextual-target-text : var(--cem-palette-comfort-text );*/
338
- /*--cem-action-alternate-target-background : var(--cem-palette-enthusiasm ); --cem-action-alternate-target-text : var(--cem-palette-enthusiasm-text );*/
339
- /*--cem-action-destructive-target-background : var(--cem-palette-danger ); --cem-action-destructive-target-text: var(--cem-palette-danger-text );*/
340
- /* endregion */
341
-
342
- /* region focus */
343
- &[focus],&:focus, &:focus-visible, &:focus-within, &.focus {
344
- --cem-zebra-color-1: CanvasText;
345
- }
346
- /*--cem-action-explicit-focus-background : var(--cem-palette-creativity ); --cem-action-explicit-focus-text : var(--cem-palette-creativity-text );*/
347
- /*--cem-action-primary-focus-background : var(--cem-palette-trust ); --cem-action-primary-focus-text : var(--cem-palette-trust-text );*/
348
- /*--cem-action-contextual-focus-background : var(--cem-palette-comfort ); --cem-action-contextual-focus-text : var(--cem-palette-comfort-text );*/
349
- /*--cem-action-alternate-focus-background : var(--cem-palette-enthusiasm ); --cem-action-alternate-focus-text : var(--cem-palette-enthusiasm-text );*/
350
- /*--cem-action-destructive-focus-background : var(--cem-palette-danger ); --cem-action-destructive-focus-text: var(--cem-palette-danger-text );*/
351
- /* endregion */
352
-
353
- /* region hover */
354
- --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 );
355
- --cem-action-primary-hover-background : color-mix(in srgb, var(--cem-palette-trust ) 60%, var(--cem-palette-trust-x )); --cem-action-primary-hover-text : var(--cem-palette-trust-text );
356
- --cem-action-contextual-hover-background : color-mix(in srgb, var(--cem-palette-comfort ) 60%, var(--cem-palette-comfort-x )); --cem-action-contextual-hover-text : var(--cem-palette-comfort-text );
357
- --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 );
358
- --cem-action-destructive-hover-background : color-mix(in srgb, var(--cem-palette-danger ) 60%, var(--cem-palette-danger-x )); --cem-action-destructive-hover-text: var(--cem-palette-danger-text );
359
- /* endregion */
360
-
361
- /* region selected */
362
- &[selected],&.selected {
363
- --cem-zebra-color-2: SelectedItem;
364
- }
365
- /*--cem-action-explicit-selected-background : color-mix(in srgb, var(--cem-palette-creativity ) 35%, var(--cem-palette-creativity-x )); --cem-action-explicit-selected-text : var(--cem-palette-creativity-text-x );*/
366
- /*--cem-action-primary-selected-background : color-mix(in srgb, var(--cem-palette-trust ) 35%, var(--cem-palette-trust-x )); --cem-action-primary-selected-text : var(--cem-palette-trust-text-x );*/
367
- /*--cem-action-contextual-selected-background : color-mix(in srgb, var(--cem-palette-comfort ) 35%, var(--cem-palette-comfort-x )); --cem-action-contextual-selected-text : var(--cem-palette-comfort-text-x );*/
368
- /*--cem-action-alternate-selected-background : color-mix(in srgb, var(--cem-palette-enthusiasm ) 35%, var(--cem-palette-enthusiasm-x )); --cem-action-alternate-selected-text : var(--cem-palette-enthusiasm-text-x );*/
369
- /*--cem-action-destructive-selected-background : color-mix(in srgb, var(--cem-palette-danger ) 35%, var(--cem-palette-danger-x )); --cem-action-destructive-selected-text: var(--cem-palette-danger-text-x );*/
370
- /* endregion */
371
-
372
- /* region active */
373
- --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 );
374
- --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 );
375
- --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 );
376
- --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 );
377
- --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 );
378
- /* endregion */
379
-
380
- /* region pending */
381
- --cem-action-explicit-pending-background : color-mix(in srgb, var(--cem-palette-creativity ) 5%, var(--cem-palette-creativity-x )); --cem-action-explicit-pending-text : var(--cem-palette-creativity-text-x );
382
- --cem-action-primary-pending-background : color-mix(in srgb, var(--cem-palette-trust ) 5%, var(--cem-palette-trust-x )); --cem-action-primary-pending-text : var(--cem-palette-trust-text-x );
383
- --cem-action-contextual-pending-background : color-mix(in srgb, var(--cem-palette-comfort ) 5%, var(--cem-palette-comfort-x )); --cem-action-contextual-pending-text : var(--cem-palette-comfort-text-x );
384
- --cem-action-alternate-pending-background : color-mix(in srgb, var(--cem-palette-enthusiasm ) 5%, var(--cem-palette-enthusiasm-x )); --cem-action-alternate-pending-text : var(--cem-palette-enthusiasm-text-x );
385
- --cem-action-destructive-pending-background : color-mix(in srgb, var(--cem-palette-danger ) 5%, var(--cem-palette-danger-x )); --cem-action-destructive-pending-text: var(--cem-palette-danger-text-x );
386
- /* endregion */
387
- background-color: var(--cem-palette-comfort, Canvas );
388
- color: var(--cem-palette-comfort-text, CanvasText);
389
-
390
- }
391
-
392
- [data-theme*="cem-theme-contrast-"],.cem-theme-contrast-light,.cem-theme-contrast-dark{
393
- --cem-action-background-color : var(--cem-palette-comfort, Canvas );
394
- --cem-action-explicit-default-background : var(--cem-action-background-color );
395
- --cem-action-primary-default-background : var(--cem-action-background-color );
396
- --cem-action-contextual-default-background : var(--cem-action-background-color );
397
- --cem-action-alternate-default-background : var(--cem-action-background-color );
398
- --cem-action-destructive-default-background : var(--cem-action-background-color );
399
-
400
- background-color: var(--cem-palette-comfort, Canvas );
401
- color: var(--cem-palette-comfort-text, CanvasText);
402
-
403
- .action, button, input[type="submit"], input[type="reset"], input[type="button"] {
404
- /*--cem-action-box-shadow-default : 0 0 0 2px var(--cem-action-box-shadow-color), 0 0 0 4px var(--cem-palette-comfort);*/
405
- /*--cem-action-box-shadow-hover : 0 0 0 4px var(--cem-action-box-shadow-color), 0 0 0 6px var(--cem-palette-comfort);*/
406
- /*--cem-action-box-shadow-active : 0 0 0 6px var(--cem-action-box-shadow-color), 0 0 0 8px var(--cem-palette-comfort);*/
407
- /*--cem-action-box-shadow: var(--cem-action-box-shadow-default);*/
408
-
409
- /*--cem-action-box-shadow-color: var(--cem-palette-comfort-text);*/
410
- background-color: var(--cem-palette-comfort, Canvas );
411
- color: var(--cem-palette-comfort-text, CanvasText );
412
- /*&:hover ,&.hover ,&[hover ] { --cem-action-box-shadow: var(--cem-action-box-shadow-hover ); }*/
413
- /*&:active,&.active,&[active] { --cem-action-box-shadow: var(--cem-action-box-shadow-active ); }*/
414
-
415
- /* outline for focus, selected, target */
416
- &[focus],&:focus, &:focus-visible, &:focus-within, &.focus,
417
- &[target], &:target, /*&:target-within, */ &.target ,
418
- &[selected],&.selected{
419
- --cem-action-box-shadow:
420
- 0 0 0 2px var(--cem-zebra-color-0),
421
- 0 0 0 4px var(--cem-zebra-color-1),
422
- 0 0 0 6px var(--cem-zebra-color-2),
423
- 0 0 0 8px var(--cem-zebra-color-3);
424
- }
425
- }
426
- }
427
- @media (forced-colors: active){
428
- background-color: light-dark( white, black );
429
- /* clone contrast theme rules ? */
430
- }
431
-
432
- /** # dimensions
433
-
434
- */
435
-
436
- /**
437
- bend - corner shape, radius, curve
438
- * smooth - slightly rounded, default
439
- * round - circular side
440
- * sharp - square edge
441
- */
442
- --cem-bend-smooth: 0.5rem;
443
- --cem-bend-round: 50cqh;
444
- --cem-bend-sharp: 0;
445
-
446
- --cem-bend: var(--cem-bend-smooth);
447
- .cem-bend-smooth{ --cem-bend: var(--cem-bend-smooth); }
448
- .cem-bend-round{ --cem-bend: var(--cem-bend-round); }
449
- .cem-bend-sharp{ --cem-bend: var(--cem-bend-sharp); }
450
-
451
-
452
- .action, button, input[type="submit"], input[type="reset"], input[type="button"] { /* default light */
453
- --cem-action-background-color: var(--cem-action-explicit-default-background);
454
- --cem-action-color: var(--cem-action-explicit-default-text);
455
- --cem-action-border-radius: var(--cem-bend);
456
- --cem-action-box-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);
457
- --cem-action-box-shadow-hover : 0px 4px 6px -2px rgba(0, 0, 0, .2), 0px 2px 2px 0px rgba(0, 0, 0, .14), 0px 2px 4px 0px rgba(0, 0, 0, .12); /* Slightly larger shadow on hover */
458
- --cem-action-box-shadow-active : 0px 1px 1px -1px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12); /* Subtler shadow for active state */
459
- --cem-action-box-shadow-pending : 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); /* same as default */
460
-
461
-
462
- --cem-action-box-padding: 1em;
463
-
464
-
465
- &:hover,&.hover,&[hover]{
466
- --cem-action-box-shadow: var(--cem-action-box-shadow-hover);
467
- }
468
- &:active,&.active,&[active]{
469
- --cem-action-box-shadow: var(--cem-action-box-shadow-active);
470
- }
471
-
472
- &[pending],&.pending{
473
- --cem-action-box-shadow: var(--cem-action-box-shadow-pending);
474
- }
475
-
476
- /* flow */
477
- &.explicit, &[flow="explicit"], &[explicit] {
478
- --cem-action-background-color: var(--cem-action-explicit-default-background);
479
- --cem-action-color: var(--cem-action-explicit-default-text);
480
- &[disabled] {
481
- --cem-action-background-color: var(--cem-action-explicit-disabled-background);
482
- --cem-action-color: var(--cem-action-explicit-disabled-text);
483
- }
484
- &[readonly] {
485
- --cem-action-background-color: var(--cem-action-explicit-readonly-background);
486
- --cem-action-color: var(--cem-action-explicit-readonly-text);
487
- }
488
- &[editable] {
489
- --cem-action-background-color: var(--cem-action-explicit-editable-background);
490
- --cem-action-color: var(--cem-action-explicit-editable-text);
491
- }
492
- &[required] {
493
- --cem-action-background-color: var(--cem-action-explicit-required-background);
494
- --cem-action-color: var(--cem-action-explicit-required-text);
495
- }
496
- &[indeterminate], &:indeterminate, &.indeterminate {
497
- --cem-action-background-color: var(--cem-action-explicit-indeterminate-background);
498
- --cem-action-color: var(--cem-action-explicit-indeterminate-text);
499
- }
500
- &[target], &:target, /*&:target-within, */ &.target {
501
- --cem-action-background-color: var(--cem-action-explicit-indeterminate-background);
502
- --cem-action-color: var(--cem-action-explicit-target-text);
503
- }
504
- &[focus],&:focus, &:focus-visible, &:focus-within, &.focus {
505
- --cem-action-background-color: var(--cem-action-explicit-focus-background);
506
- --cem-action-color: var(--cem-action-explicit-focus-text);
507
- }
508
- &[hover],&:hover,&.hover {
509
- --cem-action-background-color: var(--cem-action-explicit-hover-background);
510
- --cem-action-color: var(--cem-action-explicit-hover-text);
511
- text-decoration: blink;
512
- }
513
- &[selected],&.selected {
514
- --cem-action-background-color: var(--cem-action-explicit-selected-background);
515
- --cem-action-color: var(--cem-action-explicit-selected-text);
516
- }
517
- &[active],&:active,&.active {
518
- --cem-action-background-color: var(--cem-action-explicit-active-background);
519
- --cem-action-color: var(--cem-action-explicit-active-text);
520
- }
521
- &[pending],&.pending {
522
- --cem-action-background-color: var(--cem-action-explicit-pending-background);
523
- --cem-action-color: var(--cem-action-explicit-pending-text);
524
- }
525
-
526
-
527
- }
528
- &.primary, &[flow="primary"], &[primary] {
529
- --cem-action-background-color: var(--cem-action-primary-default-background);
530
- --cem-action-color: var(--cem-action-primary-default-text);
531
- &[disabled] {
532
- --cem-action-background-color: var(--cem-action-primary-disabled-background);
533
- --cem-action-color: var(--cem-action-primary-disabled-text);
534
- }
535
- &[readonly] {
536
- --cem-action-background-color: var(--cem-action-primary-readonly-background);
537
- --cem-action-color: var(--cem-action-primary-readonly-text);
538
- }
539
- &[editable] {
540
- --cem-action-background-color: var(--cem-action-primary-editable-background);
541
- --cem-action-color: var(--cem-action-primary-editable-text);
542
- }
543
- &[required] {
544
- --cem-action-background-color: var(--cem-action-primary-required-background);
545
- --cem-action-color: var(--cem-action-primary-required-text);
546
- }
547
- &[indeterminate], &:indeterminate, &.indeterminate {
548
- --cem-action-background-color: var(--cem-action-primary-indeterminate-background);
549
- --cem-action-color: var(--cem-action-primary-indeterminate-text);
550
- }
551
- &[target], &:target, /*&:target-within, */ &.target {
552
- --cem-action-background-color: var(--cem-action-primary-target-background);
553
- --cem-action-color: var(--cem-action-primary-target-text);
554
- }
555
- &[focus],&:focus, &:focus-visible, &:focus-within, &.focus {
556
- --cem-action-background-color: var(--cem-action-primary-focus-background);
557
- --cem-action-color: var(--cem-action-primary-focus-text);
558
- }
559
- &[hover],&:hover,&.hover {
560
- --cem-action-background-color: var(--cem-action-primary-hover-background);
561
- --cem-action-color: var(--cem-action-primary-hover-text);
562
- }
563
- &[selected],&.selected {
564
- --cem-action-background-color: var(--cem-action-primary-selected-background);
565
- --cem-action-color: var(--cem-action-primary-selected-text);
566
- }
567
- &[active],&:active,&.active {
568
- --cem-action-background-color: var(--cem-action-primary-active-background);
569
- --cem-action-color: var(--cem-action-primary-active-text);
570
- }
571
- &[pending],&.pending {
572
- --cem-action-background-color: var(--cem-action-primary-pending-background);
573
- --cem-action-color: var(--cem-action-primary-pending-text);
574
- }
575
-
576
-
577
- }
578
- &.contextual, &[flow="contextual"], &[contextual] {
579
- --cem-action-background-color: var(--cem-action-contextual-default-background);
580
- --cem-action-color: var(--cem-action-contextual-default-text);
581
- &[disabled] {
582
- --cem-action-background-color: var(--cem-action-contextual-disabled-background);
583
- --cem-action-color: var(--cem-action-contextual-disabled-text);
584
- }
585
- &[readonly] {
586
- --cem-action-background-color: var(--cem-action-contextual-readonly-background);
587
- --cem-action-color: var(--cem-action-contextual-readonly-text);
588
- }
589
- &[editable] {
590
- --cem-action-background-color: var(--cem-action-contextual-editable-background);
591
- --cem-action-color: var(--cem-action-contextual-editable-text);
592
- }
593
- &[required] {
594
- --cem-action-background-color: var(--cem-action-contextual-required-background);
595
- --cem-action-color: var(--cem-action-contextual-required-text);
596
- }
597
- &[indeterminate], &:indeterminate, &.indeterminate {
598
- --cem-action-background-color: var(--cem-action-contextual-indeterminate-background);
599
- --cem-action-color: var(--cem-action-contextual-indeterminate-text);
600
- }
601
- &[target], &:target, /*&:target-within, */ &.target {
602
- --cem-action-background-color: var(--cem-action-contextual-target-background);
603
- --cem-action-color: var(--cem-action-contextual-target-text);
604
- }
605
- &[focus],&:focus, &:focus-visible, &:focus-within, &.focus {
606
- --cem-action-background-color: var(--cem-action-contextual-focus-background);
607
- --cem-action-color: var(--cem-action-contextual-focus-text);
608
- }
609
- &[hover],&:hover,&.hover {
610
- --cem-action-background-color: var(--cem-action-contextual-hover-background);
611
- --cem-action-color: var(--cem-action-contextual-hover-text);
612
- }
613
- &[selected],&.selected {
614
- --cem-action-background-color: var(--cem-action-contextual-selected-background);
615
- --cem-action-color: var(--cem-action-contextual-selected-text);
616
- }
617
- &[active],&:active,&.active {
618
- --cem-action-background-color: var(--cem-action-contextual-active-background);
619
- --cem-action-color: var(--cem-action-contextual-active-text);
620
- }
621
- &[pending],&.pending {
622
- --cem-action-background-color: var(--cem-action-contextual-pending-background);
623
- --cem-action-color: var(--cem-action-contextual-pending-text);
624
- }
625
-
626
-
627
- }
628
- &.alternate, &[flow="alternate"], &[alternate] {
629
- --cem-action-background-color: var(--cem-action-alternate-default-background);
630
- --cem-action-color: var(--cem-action-alternate-default-text);
631
- &[disabled] {
632
- --cem-action-background-color: var(--cem-action-alternate-disabled-background);
633
- --cem-action-color: var(--cem-action-alternate-disabled-text);
634
- }
635
- &[readonly] {
636
- --cem-action-background-color: var(--cem-action-alternate-readonly-background);
637
- --cem-action-color: var(--cem-action-alternate-readonly-text);
638
- }
639
- &[editable] {
640
- --cem-action-background-color: var(--cem-action-alternate-editable-background);
641
- --cem-action-color: var(--cem-action-alternate-editable-text);
642
- }
643
- &[required] {
644
- --cem-action-background-color: var(--cem-action-alternate-required-background);
645
- --cem-action-color: var(--cem-action-alternate-required-text);
646
- }
647
- &[indeterminate], &:indeterminate, &.indeterminate {
648
- --cem-action-background-color: var(--cem-action-alternate-indeterminate-background);
649
- --cem-action-color: var(--cem-action-alternate-indeterminate-text);
650
- }
651
- &[target], &:target, /*&:target-within, */ &.target {
652
- --cem-action-background-color: var(--cem-action-alternate-target-background);
653
- --cem-action-color: var(--cem-action-alternate-target-text);
654
- }
655
- &[focus],&:focus, &:focus-visible, &:focus-within, &.focus {
656
- --cem-action-background-color: var(--cem-action-alternate-focus-background);
657
- --cem-action-color: var(--cem-action-alternate-focus-text);
658
- }
659
- &[hover],&:hover,&.hover {
660
- --cem-action-background-color: var(--cem-action-alternate-hover-background);
661
- --cem-action-color: var(--cem-action-alternate-hover-text);
662
- }
663
- &[selected],&.selected {
664
- --cem-action-background-color: var(--cem-action-alternate-selected-background);
665
- --cem-action-color: var(--cem-action-alternate-selected-text);
666
- }
667
- &[active],&:active,&.active {
668
- --cem-action-background-color: var(--cem-action-alternate-active-background);
669
- --cem-action-color: var(--cem-action-alternate-active-text);
670
- }
671
- &[pending],&.pending {
672
- --cem-action-background-color: var(--cem-action-alternate-pending-background);
673
- --cem-action-color: var(--cem-action-alternate-pending-text);
674
- }
675
-
676
-
677
- }
678
- &.destructive, &[flow="destructive"], &[destructive] {
679
- --cem-action-background-color: var(--cem-action-destructive-default-background);
680
- --cem-action-color: var(--cem-action-destructive-default-text);
681
- &[disabled] {
682
- --cem-action-background-color: var(--cem-action-destructive-disabled-background);
683
- --cem-action-color: var(--cem-action-destructive-disabled-text);
684
- }
685
- &[readonly] {
686
- --cem-action-background-color: var(--cem-action-destructive-readonly-background);
687
- --cem-action-color: var(--cem-action-destructive-readonly-text);
688
- }
689
- &[editable] {
690
- --cem-action-background-color: var(--cem-action-destructive-editable-background);
691
- --cem-action-color: var(--cem-action-destructive-editable-text);
692
- }
693
- &[required] {
694
- /* marker for required */
695
- /*--cem-action-background-color: var(--cem-action-destructive-required-background);*/
696
- /*--cem-action-color: var(--cem-action-destructive-required-text);*/
697
- }
698
- &[indeterminate], &:indeterminate, &.indeterminate {
699
- --cem-action-background-color: var(--cem-action-destructive-indeterminate-background);
700
- --cem-action-color: var(--cem-action-destructive-indeterminate-text);
701
- }
702
- &[target], &:target, /*&:target-within, */ &.target {
703
- /*--cem-action-background-color: var(--cem-action-destructive-target-background);*/
704
- /*--cem-action-color: var(--cem-action-destructive-target-text);*/
705
- }
706
- &[focus],&:focus, &:focus-visible, &:focus-within, &.focus {
707
- --cem-zebra-color-1: CanvasText;
708
- /*--cem-action-background-color: var(--cem-action-destructive-focus-background);*/
709
- /*--cem-action-color: var(--cem-action-destructive-focus-text);*/
710
- }
711
- &[hover],&:hover,&.hover {
712
- --cem-action-background-color: var(--cem-action-destructive-hover-background);
713
- --cem-action-color: var(--cem-action-destructive-hover-text);
714
- }
715
- &[selected],&.selected {
716
- /*--cem-action-background-color: var(--cem-action-destructive-selected-background);*/
717
- /*--cem-action-color: var(--cem-action-destructive-selected-text);*/
718
- }
719
- &[active],&:active,&.active {
720
- --cem-action-background-color: var(--cem-action-destructive-active-background);
721
- --cem-action-color: var(--cem-action-destructive-active-text);
722
- }
723
- &[pending],&.pending {
724
- --cem-action-background-color: var(--cem-action-destructive-pending-background);
725
- --cem-action-color: var(--cem-action-destructive-pending-text);
726
- }
727
-
728
-
729
- }
730
-
731
- &[pending],&.pending{
732
- background: linear-gradient(90deg, var(--cem-action-background-color), var(--cem-palette-calm-x), var(--cem-action-background-color), var(--cem-palette-calm-x));
733
- background-size: 300% 100%;
734
- animation: cem-slide-x var(--cem-animation-speed) ease-in-out infinite;
735
- }
736
-
737
- background-color: var(--cem-action-background-color);
738
- color: var(--cem-action-color);
739
- border: none;
740
- border-radius: var(--cem-action-border-radius);
741
- box-shadow: var(--cem-action-box-shadow);
742
- padding: var(--cem-action-box-padding);
743
- }
744
-
745
12
  }