@epa-wg/custom-element 0.0.36 → 0.0.37
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.
- package/README.md +4 -4
- package/bin/xslDtd2Ide.mjs +1 -1
- package/custom-element.js +1 -0
- package/demo/a.html +41 -64
- package/demo/s.xslt +94 -350
- package/ide/web-types-dce.json +1 -1
- package/ide/web-types-xsl.json +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -343,16 +343,16 @@ within template
|
|
|
343
343
|
[slice-demo-url]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/data-slices.html
|
|
344
344
|
[for-each-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/for-each.html
|
|
345
345
|
[hex-grid-url]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/hex-grid.html
|
|
346
|
-
[hex-grid-image]: https://unpkg.com/@epa-wg/custom-element@0.0.
|
|
346
|
+
[hex-grid-image]: https://unpkg.com/@epa-wg/custom-element@0.0.37/demo/hex-grid-transform.png
|
|
347
347
|
[local-storage-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/local-storage.html
|
|
348
348
|
[http-request-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/http-request.html
|
|
349
349
|
[location-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/location.html
|
|
350
350
|
[github-image]: https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
|
|
351
351
|
[npm-image]: https://img.shields.io/npm/v/@epa-wg/custom-element.svg
|
|
352
352
|
[npm-url]: https://npmjs.org/package/@epa-wg/custom-element
|
|
353
|
-
[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.
|
|
354
|
-
[coverage-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.
|
|
355
|
-
[storybook-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.
|
|
353
|
+
[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.37/coverage/src/custom-element/coverage.svg
|
|
354
|
+
[coverage-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.37/coverage/src/custom-element/index.html
|
|
355
|
+
[storybook-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.37/storybook-static/index.html?path=/story/welcome--introduction
|
|
356
356
|
[sandbox-url]: https://stackblitz.com/github/EPA-WG/custom-element?file=index.html
|
|
357
357
|
[webcomponents-url]: https://www.webcomponents.org/element/@epa-wg/custom-element
|
|
358
358
|
[webcomponents-img]: https://img.shields.io/badge/webcomponents.org-published-blue.svg
|
package/bin/xslDtd2Ide.mjs
CHANGED
|
@@ -116,7 +116,7 @@ writeFileSync( '.././ide/customData-xsl.json', JSON.stringify( vsCode, undefined
|
|
|
116
116
|
const intelliJ = {
|
|
117
117
|
"$schema": "http://json.schemastore.org/web-types",
|
|
118
118
|
"name": "@epa-wg/custom-element",
|
|
119
|
-
"version": "0.0.
|
|
119
|
+
"version": "0.0.37",
|
|
120
120
|
"js-types-syntax": "typescript",
|
|
121
121
|
"description-markup": "markdown",
|
|
122
122
|
"contributions": {
|
package/custom-element.js
CHANGED
package/demo/a.html
CHANGED
|
@@ -1,80 +1,57 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
2
|
+
<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:html="http://www.w3.org/1999/xhtml">
|
|
3
3
|
<head>
|
|
4
4
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
5
5
|
<title>http-request Declarative Custom Element implementation demo</title>
|
|
6
|
-
|
|
6
|
+
<link rel="icon" href="./wc-square.svg" />
|
|
7
7
|
|
|
8
8
|
<script type="module" src="../http-request.js"></script>
|
|
9
9
|
<script type="module" src="../custom-element.js"></script>
|
|
10
10
|
<style>
|
|
11
11
|
@import "./demo.css";
|
|
12
12
|
|
|
13
|
-
button
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
button img {
|
|
27
|
-
max-height: 10vw;
|
|
28
|
-
min-height: 4rem;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
table {
|
|
32
|
-
min-width: 16rem;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
td {
|
|
36
|
-
border-bottom: 1px solid silver;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
tfoot td {
|
|
40
|
-
border-bottom: none;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
td, th {
|
|
44
|
-
text-align: right;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
caption {
|
|
48
|
-
padding: 1rem;
|
|
49
|
-
font-weight: bolder;
|
|
50
|
-
font-family: sans-serif;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
code {
|
|
54
|
-
text-align: right;
|
|
55
|
-
min-width: 3rem;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
svg {
|
|
59
|
-
max-height: 3rem;
|
|
60
|
-
}
|
|
13
|
+
button
|
|
14
|
+
{ display: inline-flex; flex-direction: column; align-items: center; flex: auto;
|
|
15
|
+
box-shadow: inset silver 0px 0px 1rem; min-width: 12rem; padding: 1rem;
|
|
16
|
+
color: coral; text-shadow: 1px 1px silver; font-weight: bolder;
|
|
17
|
+
}
|
|
18
|
+
button img{ max-height: 10vw; min-height: 4rem;}
|
|
19
|
+
table{ min-width: 16rem; }
|
|
20
|
+
td{ border-bottom: 1px solid silver; }
|
|
21
|
+
tfoot td{ border-bottom: none; }
|
|
22
|
+
td,th{text-align: right; }
|
|
23
|
+
caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
|
|
24
|
+
dce-1{ padding: 0; display: flex; flex-wrap: wrap;}
|
|
25
|
+
code{ text-align: right; min-width: 3rem;}
|
|
61
26
|
</style>
|
|
62
27
|
</head>
|
|
63
28
|
<body>
|
|
64
29
|
|
|
65
|
-
|
|
66
|
-
<
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
30
|
+
<custom-element>
|
|
31
|
+
<template><!-- wrapping into template to prevent images loading within DCE declaration -->
|
|
32
|
+
<p>Pokemon buttons from API</p>
|
|
33
|
+
<http-request
|
|
34
|
+
url="https://pokeapi.co/api/v2/pokemon?limit=6&offset=0"
|
|
35
|
+
slice="page"
|
|
36
|
+
method="GET"
|
|
37
|
+
header-accept="application/json"
|
|
38
|
+
></http-request>
|
|
39
|
+
<variable name="slides-url"
|
|
40
|
+
>https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world</variable>
|
|
41
|
+
{count(//results)}
|
|
42
|
+
<div><for-each select="//results">
|
|
43
|
+
<variable name="pokeid"
|
|
44
|
+
select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"
|
|
45
|
+
></variable>
|
|
46
|
+
<button>
|
|
47
|
+
<img src="{$slides-url}/{$pokeid}.svg"
|
|
48
|
+
alt="{@name}"/>
|
|
49
|
+
{@name}
|
|
50
|
+
</button>
|
|
51
|
+
</for-each>
|
|
52
|
+
</div>
|
|
53
|
+
</template>
|
|
54
|
+
</custom-element>
|
|
55
|
+
<button onclick="window.customElements.upgrade(document.body);console.log(9);">window.customElements.upgrade(document.body)</button>
|
|
79
56
|
</body>
|
|
80
57
|
</html>
|
package/demo/s.xslt
CHANGED
|
@@ -14,357 +14,101 @@
|
|
|
14
14
|
</xsl:template>
|
|
15
15
|
<xsl:template mode="payload" match="attributes">
|
|
16
16
|
<dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
</td>
|
|
36
|
-
<td data-dce-id="17">blue</td>
|
|
37
|
-
<td data-dce-id="18">xl</td>
|
|
38
|
-
<td data-dce-id="19">
|
|
39
|
-
<code data-dce-id="20">#faf9fd</code>
|
|
40
|
-
</td>
|
|
41
|
-
<td data-dce-id="21">Lightest blue</td>
|
|
42
|
-
<td data-dce-id="22">Comfort/trust emotion (light scene)</td>
|
|
43
|
-
</tr>
|
|
44
|
-
<tr data-dce-id="23">
|
|
45
|
-
<td data-dce-id="24">
|
|
46
|
-
<code data-dce-id="25">--cem-color-blue-l</code>
|
|
47
|
-
</td>
|
|
48
|
-
<td data-dce-id="26">blue</td>
|
|
49
|
-
<td data-dce-id="27">l</td>
|
|
50
|
-
<td data-dce-id="28">
|
|
51
|
-
<code data-dce-id="29">#d7e3ff</code>
|
|
52
|
-
</td>
|
|
53
|
-
<td data-dce-id="30">Light blue</td>
|
|
54
|
-
<td data-dce-id="31">Trust palette, attention semantic</td>
|
|
55
|
-
</tr>
|
|
56
|
-
<tr data-dce-id="32">
|
|
57
|
-
<td data-dce-id="33">
|
|
58
|
-
<code data-dce-id="34">--cem-color-blue-d</code>
|
|
59
|
-
</td>
|
|
60
|
-
<td data-dce-id="35">blue</td>
|
|
61
|
-
<td data-dce-id="36">d</td>
|
|
62
|
-
<td data-dce-id="37">
|
|
63
|
-
<code data-dce-id="38">#002f65</code>
|
|
64
|
-
</td>
|
|
65
|
-
<td data-dce-id="39">Dark blue</td>
|
|
66
|
-
<td data-dce-id="40">Trust palette (dark theme)</td>
|
|
67
|
-
</tr>
|
|
68
|
-
<tr data-dce-id="41">
|
|
69
|
-
<td data-dce-id="42">
|
|
70
|
-
<code data-dce-id="43">--cem-color-blue-xd</code>
|
|
71
|
-
</td>
|
|
72
|
-
<td data-dce-id="44">blue</td>
|
|
73
|
-
<td data-dce-id="45">xd</td>
|
|
74
|
-
<td data-dce-id="46">
|
|
75
|
-
<code data-dce-id="47">#1a1b1f</code>
|
|
76
|
-
</td>
|
|
77
|
-
<td data-dce-id="48">Darkest blue</td>
|
|
78
|
-
<td data-dce-id="49">Comfort/trust emotion (dark scene)</td>
|
|
79
|
-
</tr>
|
|
80
|
-
<tr data-dce-id="50">
|
|
81
|
-
<td data-dce-id="51">
|
|
82
|
-
<code data-dce-id="52">--cem-color-brown-xl</code>
|
|
83
|
-
</td>
|
|
84
|
-
<td data-dce-id="53">brown</td>
|
|
85
|
-
<td data-dce-id="54">xl</td>
|
|
86
|
-
<td data-dce-id="55">
|
|
87
|
-
<code data-dce-id="56">#d7ccc8</code>
|
|
88
|
-
</td>
|
|
89
|
-
<td data-dce-id="57">Extra light brown</td>
|
|
90
|
-
<td data-dce-id="58">Conservative palette (light theme)</td>
|
|
91
|
-
</tr>
|
|
92
|
-
<tr data-dce-id="59">
|
|
93
|
-
<td data-dce-id="60">
|
|
94
|
-
<code data-dce-id="61">--cem-color-brown-l</code>
|
|
95
|
-
</td>
|
|
96
|
-
<td data-dce-id="62">brown</td>
|
|
97
|
-
<td data-dce-id="63">l</td>
|
|
98
|
-
<td data-dce-id="64">
|
|
99
|
-
<code data-dce-id="65">#a1887f</code>
|
|
100
|
-
</td>
|
|
101
|
-
<td data-dce-id="66">Light brown</td>
|
|
102
|
-
<td data-dce-id="67">Conservative emotion, brand-3</td>
|
|
103
|
-
</tr>
|
|
104
|
-
<tr data-dce-id="68">
|
|
105
|
-
<td data-dce-id="69">
|
|
106
|
-
<code data-dce-id="70">--cem-color-brown-d</code>
|
|
107
|
-
</td>
|
|
108
|
-
<td data-dce-id="71">brown</td>
|
|
109
|
-
<td data-dce-id="72">d</td>
|
|
110
|
-
<td data-dce-id="73">
|
|
111
|
-
<code data-dce-id="74">#4e342e</code>
|
|
112
|
-
</td>
|
|
113
|
-
<td data-dce-id="75">Dark brown</td>
|
|
114
|
-
<td data-dce-id="76">Conservative palette (dark theme)</td>
|
|
115
|
-
</tr>
|
|
116
|
-
<tr data-dce-id="77">
|
|
117
|
-
<td data-dce-id="78">
|
|
118
|
-
<code data-dce-id="79">--cem-color-brown-xd</code>
|
|
119
|
-
</td>
|
|
120
|
-
<td data-dce-id="80">brown</td>
|
|
121
|
-
<td data-dce-id="81">xd</td>
|
|
122
|
-
<td data-dce-id="82">
|
|
123
|
-
<code data-dce-id="83">#3e2723</code>
|
|
124
|
-
</td>
|
|
125
|
-
<td data-dce-id="84">Extra dark brown</td>
|
|
126
|
-
<td data-dce-id="85">Conservative palette (dark theme, extreme)</td>
|
|
127
|
-
</tr>
|
|
128
|
-
<tr data-dce-id="86">
|
|
129
|
-
<td data-dce-id="87">
|
|
130
|
-
<code data-dce-id="88">--cem-color-cyan-xl</code>
|
|
131
|
-
</td>
|
|
132
|
-
<td data-dce-id="89">cyan</td>
|
|
133
|
-
<td data-dce-id="90">xl</td>
|
|
134
|
-
<td data-dce-id="91">
|
|
135
|
-
<code data-dce-id="92">#f1fefe</code>
|
|
136
|
-
</td>
|
|
137
|
-
<td data-dce-id="93">Extra light cyan</td>
|
|
138
|
-
<td data-dce-id="94">Used for comfort palette (light scenes)</td>
|
|
139
|
-
</tr>
|
|
140
|
-
<tr data-dce-id="95">
|
|
141
|
-
<td data-dce-id="96">
|
|
142
|
-
<code data-dce-id="97">--cem-color-cyan-l</code>
|
|
143
|
-
</td>
|
|
144
|
-
<td data-dce-id="98">cyan</td>
|
|
145
|
-
<td data-dce-id="99">l</td>
|
|
146
|
-
<td data-dce-id="100">
|
|
147
|
-
<code data-dce-id="101">#00fbfb</code>
|
|
148
|
-
</td>
|
|
149
|
-
<td data-dce-id="102">Light cyan</td>
|
|
150
|
-
<td data-dce-id="103">Calm palette, creativity accent</td>
|
|
151
|
-
</tr>
|
|
152
|
-
<tr data-dce-id="104">
|
|
153
|
-
<td data-dce-id="105">
|
|
154
|
-
<code data-dce-id="106">--cem-color-cyan-d</code>
|
|
155
|
-
</td>
|
|
156
|
-
<td data-dce-id="107">cyan</td>
|
|
157
|
-
<td data-dce-id="108">d</td>
|
|
158
|
-
<td data-dce-id="109">
|
|
159
|
-
<code data-dce-id="110">#006a6a</code>
|
|
160
|
-
</td>
|
|
161
|
-
<td data-dce-id="111">Dark cyan</td>
|
|
162
|
-
<td data-dce-id="112">Calm palette (dark theme)</td>
|
|
163
|
-
</tr>
|
|
164
|
-
<tr data-dce-id="113">
|
|
165
|
-
<td data-dce-id="114">
|
|
166
|
-
<code data-dce-id="115">--cem-color-cyan-xd</code>
|
|
167
|
-
</td>
|
|
168
|
-
<td data-dce-id="116">cyan</td>
|
|
169
|
-
<td data-dce-id="117">xd</td>
|
|
170
|
-
<td data-dce-id="118">
|
|
171
|
-
<code data-dce-id="119">#001010</code>
|
|
172
|
-
</td>
|
|
173
|
-
<td data-dce-id="120">Extra dark cyan</td>
|
|
174
|
-
<td data-dce-id="121">Used for comfort palette (dark scenes)</td>
|
|
175
|
-
</tr>
|
|
176
|
-
<tr data-dce-id="122">
|
|
177
|
-
<td data-dce-id="123">
|
|
178
|
-
<code data-dce-id="124">--cem-color-grey-l</code>
|
|
179
|
-
</td>
|
|
180
|
-
<td data-dce-id="125">grey</td>
|
|
181
|
-
<td data-dce-id="126">l</td>
|
|
182
|
-
<td data-dce-id="127">
|
|
183
|
-
<code data-dce-id="128">#f1f1eb</code>
|
|
184
|
-
</td>
|
|
185
|
-
<td data-dce-id="129">Light grey</td>
|
|
186
|
-
<td data-dce-id="130">Conservative palette, neutral backgrounds</td>
|
|
187
|
-
</tr>
|
|
188
|
-
<tr data-dce-id="131">
|
|
189
|
-
<td data-dce-id="132">
|
|
190
|
-
<code data-dce-id="133">--cem-color-grey-d</code>
|
|
191
|
-
</td>
|
|
192
|
-
<td data-dce-id="134">grey</td>
|
|
193
|
-
<td data-dce-id="135">d</td>
|
|
194
|
-
<td data-dce-id="136">
|
|
195
|
-
<code data-dce-id="137">#1a1c18</code>
|
|
196
|
-
</td>
|
|
197
|
-
<td data-dce-id="138">Dark grey</td>
|
|
198
|
-
<td data-dce-id="139">Conservative palette (dark theme)</td>
|
|
199
|
-
</tr>
|
|
200
|
-
<tr data-dce-id="140">
|
|
201
|
-
<td data-dce-id="141">
|
|
202
|
-
<code data-dce-id="142">--cem-color-orange-xl</code>
|
|
203
|
-
</td>
|
|
204
|
-
<td data-dce-id="143">orange</td>
|
|
205
|
-
<td data-dce-id="144">xl</td>
|
|
206
|
-
<td data-dce-id="145">
|
|
207
|
-
<code data-dce-id="146">#f0f070</code>
|
|
208
|
-
</td>
|
|
209
|
-
<td data-dce-id="147">Extra light yellow</td>
|
|
210
|
-
<td data-dce-id="148">Enthusiasm palette (light theme)</td>
|
|
211
|
-
</tr>
|
|
212
|
-
<tr data-dce-id="149">
|
|
213
|
-
<td data-dce-id="150">
|
|
214
|
-
<code data-dce-id="151">--cem-color-orange-l</code>
|
|
215
|
-
</td>
|
|
216
|
-
<td data-dce-id="152">orange</td>
|
|
217
|
-
<td data-dce-id="153">l</td>
|
|
218
|
-
<td data-dce-id="154">
|
|
219
|
-
<code data-dce-id="155">#ffe082</code>
|
|
220
|
-
</td>
|
|
221
|
-
<td data-dce-id="156">Light orange</td>
|
|
222
|
-
<td data-dce-id="157">Enthusiasm emotion, brand-2</td>
|
|
223
|
-
</tr>
|
|
224
|
-
<tr data-dce-id="158">
|
|
225
|
-
<td data-dce-id="159">
|
|
226
|
-
<code data-dce-id="160">--cem-color-orange-d</code>
|
|
227
|
-
</td>
|
|
228
|
-
<td data-dce-id="161">orange</td>
|
|
229
|
-
<td data-dce-id="162">d</td>
|
|
230
|
-
<td data-dce-id="163">
|
|
231
|
-
<code data-dce-id="164">#723600</code>
|
|
232
|
-
</td>
|
|
233
|
-
<td data-dce-id="165">Dark orange</td>
|
|
234
|
-
<td data-dce-id="166">Enthusiasm hype (dark theme)</td>
|
|
235
|
-
</tr>
|
|
236
|
-
<tr data-dce-id="167">
|
|
237
|
-
<td data-dce-id="168">
|
|
238
|
-
<code data-dce-id="169">--cem-color-orange-xd</code>
|
|
239
|
-
</td>
|
|
240
|
-
<td data-dce-id="170">orange</td>
|
|
241
|
-
<td data-dce-id="171">xd</td>
|
|
242
|
-
<td data-dce-id="172">
|
|
243
|
-
<code data-dce-id="173">#502400</code>
|
|
244
|
-
</td>
|
|
245
|
-
<td data-dce-id="174">Extra dark orange</td>
|
|
246
|
-
<td data-dce-id="175">Enthusiasm palette (dark theme, extreme)</td>
|
|
247
|
-
</tr>
|
|
248
|
-
<tr data-dce-id="176">
|
|
249
|
-
<td data-dce-id="177">
|
|
250
|
-
<code data-dce-id="178">--cem-color-purple-xl</code>
|
|
251
|
-
</td>
|
|
252
|
-
<td data-dce-id="179">purple</td>
|
|
253
|
-
<td data-dce-id="180">xl</td>
|
|
254
|
-
<td data-dce-id="181">
|
|
255
|
-
<code data-dce-id="182">#f3e5f5</code>
|
|
256
|
-
</td>
|
|
257
|
-
<td data-dce-id="183">Extra light purple</td>
|
|
258
|
-
<td data-dce-id="184">Creativity palette (light theme)</td>
|
|
259
|
-
</tr>
|
|
260
|
-
<tr data-dce-id="185">
|
|
261
|
-
<td data-dce-id="186">
|
|
262
|
-
<code data-dce-id="187">--cem-color-purple-l</code>
|
|
263
|
-
</td>
|
|
264
|
-
<td data-dce-id="188">purple</td>
|
|
265
|
-
<td data-dce-id="189">l</td>
|
|
266
|
-
<td data-dce-id="190">
|
|
267
|
-
<code data-dce-id="191">#e1bee7</code>
|
|
268
|
-
</td>
|
|
269
|
-
<td data-dce-id="192">Light purple</td>
|
|
270
|
-
<td data-dce-id="193">Creativity emotion, brand-1</td>
|
|
271
|
-
</tr>
|
|
272
|
-
<tr data-dce-id="194">
|
|
273
|
-
<td data-dce-id="195">
|
|
274
|
-
<code data-dce-id="196">--cem-color-purple-d</code>
|
|
275
|
-
</td>
|
|
276
|
-
<td data-dce-id="197">purple</td>
|
|
277
|
-
<td data-dce-id="198">d</td>
|
|
278
|
-
<td data-dce-id="199">
|
|
279
|
-
<code data-dce-id="200">#6a1b9a</code>
|
|
280
|
-
</td>
|
|
281
|
-
<td data-dce-id="201">Dark purple</td>
|
|
282
|
-
<td data-dce-id="202">Creativity palette (dark theme)</td>
|
|
283
|
-
</tr>
|
|
284
|
-
<tr data-dce-id="203">
|
|
285
|
-
<td data-dce-id="204">
|
|
286
|
-
<code data-dce-id="205">--cem-color-purple-xd</code>
|
|
287
|
-
</td>
|
|
288
|
-
<td data-dce-id="206">purple</td>
|
|
289
|
-
<td data-dce-id="207">xd</td>
|
|
290
|
-
<td data-dce-id="208">
|
|
291
|
-
<code data-dce-id="209">#4a148c</code>
|
|
292
|
-
</td>
|
|
293
|
-
<td data-dce-id="210">Extra dark purple</td>
|
|
294
|
-
<td data-dce-id="211">Creativity palette (dark theme, extreme)</td>
|
|
295
|
-
</tr>
|
|
296
|
-
<tr data-dce-id="212">
|
|
297
|
-
<td data-dce-id="213">
|
|
298
|
-
<code data-dce-id="214">--cem-color-red-xl</code>
|
|
299
|
-
</td>
|
|
300
|
-
<td data-dce-id="215">red</td>
|
|
301
|
-
<td data-dce-id="216">xl</td>
|
|
302
|
-
<td data-dce-id="217">
|
|
303
|
-
<code data-dce-id="218">#ffb4ab</code>
|
|
304
|
-
</td>
|
|
305
|
-
<td data-dce-id="219">Extra light red</td>
|
|
306
|
-
<td data-dce-id="220">Danger palette (light theme)</td>
|
|
307
|
-
</tr>
|
|
308
|
-
<tr data-dce-id="221">
|
|
309
|
-
<td data-dce-id="222">
|
|
310
|
-
<code data-dce-id="223">--cem-color-red-l</code>
|
|
311
|
-
</td>
|
|
312
|
-
<td data-dce-id="224">red</td>
|
|
313
|
-
<td data-dce-id="225">l</td>
|
|
314
|
-
<td data-dce-id="226">
|
|
315
|
-
<code data-dce-id="227">#ba1a1a</code>
|
|
316
|
-
</td>
|
|
317
|
-
<td data-dce-id="228">Light red</td>
|
|
318
|
-
<td data-dce-id="229">Danger emotion, alert semantic</td>
|
|
319
|
-
</tr>
|
|
320
|
-
<tr data-dce-id="230">
|
|
321
|
-
<td data-dce-id="231">
|
|
322
|
-
<code data-dce-id="232">--cem-color-red-d</code>
|
|
323
|
-
</td>
|
|
324
|
-
<td data-dce-id="233">red</td>
|
|
325
|
-
<td data-dce-id="234">d</td>
|
|
326
|
-
<td data-dce-id="235">
|
|
327
|
-
<code data-dce-id="236">#690005</code>
|
|
328
|
-
</td>
|
|
329
|
-
<td data-dce-id="237">Dark red</td>
|
|
330
|
-
<td data-dce-id="238">Danger palette (dark theme)</td>
|
|
331
|
-
</tr>
|
|
332
|
-
<tr data-dce-id="239">
|
|
333
|
-
<td data-dce-id="240">
|
|
334
|
-
<code data-dce-id="241">--cem-color-red-xd</code>
|
|
335
|
-
</td>
|
|
336
|
-
<td data-dce-id="242">red</td>
|
|
337
|
-
<td data-dce-id="243">xd</td>
|
|
338
|
-
<td data-dce-id="244">
|
|
339
|
-
<code data-dce-id="245">#410002</code>
|
|
340
|
-
</td>
|
|
341
|
-
<td data-dce-id="246">Extra dark red</td>
|
|
342
|
-
<td data-dce-id="247">Danger palette (dark theme, extreme)</td>
|
|
343
|
-
</tr>
|
|
344
|
-
</tbody>
|
|
345
|
-
</table>
|
|
346
|
-
</xsl:variable>
|
|
347
|
-
<label data-dce-id="248">
|
|
348
|
-
<input type="checkbox" data-testid="toggle-all" slice="show-all" value="ALL" data-dce-id="249"/>
|
|
349
|
-
<dce-text data-dce-id="250">ALL</dce-text>
|
|
350
|
-
</label>
|
|
351
|
-
<xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="cem-color-hue-variant"
|
|
352
|
-
select="exsl:node-set($test-data)//*[@id='cem-color-hue-variant']/following-sibling::table[1]/tbody"/>
|
|
353
|
-
<xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="all-or-nothing"
|
|
354
|
-
select="$cem-color-hue-variant[ //show-all = 'ALL' ]">
|
|
355
|
-
<dce-text data-dce-id="251">
|
|
356
|
-
0
|
|
357
|
-
</dce-text>
|
|
358
|
-
<xsl:for-each select="$all-or-nothing/*">
|
|
359
|
-
<div data-testid="color-{position()}" data-dce-id="252">
|
|
360
|
-
<xsl:value-of select="./*[1]"/>
|
|
361
|
-
</div>
|
|
17
|
+
<http-request xmlns="" method="GET" slice="cem-colors" url="../../../dist/lib/tokens/cem-colors.xhtml"
|
|
18
|
+
data-dce-id="2"/>
|
|
19
|
+
<xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="colorsData" select="//cem-colors"/>
|
|
20
|
+
<xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="cem-color-hue-variant"
|
|
21
|
+
select="$colorsData//*[@id='cem-color-hue-variant']/following-sibling::xhtml:table[1]/xhtml:tbody"/>
|
|
22
|
+
<xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="css-body">
|
|
23
|
+
<dce-text xmlns="" data-dce-id="3">
|
|
24
|
+
|
|
25
|
+
:root{
|
|
26
|
+
/* branded colors: cem-color-[hue]-[variant] */
|
|
27
|
+
|
|
28
|
+
</dce-text>
|
|
29
|
+
<span xmlns="" data-dce-id="4">
|
|
30
|
+
<xsl:for-each select="$cem-color-hue-variant/xhtml:tr">
|
|
31
|
+
<xsl:value-of select="./*[1]"/> :
|
|
32
|
+
<xsl:value-of select="./*[4]"/> ; /*
|
|
33
|
+
<xsl:value-of select="./*[5]"/> ;
|
|
34
|
+
<xsl:value-of select="./*[6]"/> */
|
|
362
35
|
</xsl:for-each>
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
36
|
+
</span>
|
|
37
|
+
<dce-text xmlns="" data-dce-id="5">
|
|
38
|
+
|
|
39
|
+
/* emotion palette: cem-palette-[emotion]-[shift] */
|
|
40
|
+
</dce-text>
|
|
41
|
+
<xsl:variable name="cem-palette-emotion-heading"
|
|
42
|
+
select="$colorsData//*[@id='cem-palette-emotion-shift']"/>
|
|
43
|
+
<xsl:variable name="cem-palette-emotion"
|
|
44
|
+
select="$cem-palette-emotion-heading/following-sibling::xhtml:table[1]/xhtml:tbody"/>
|
|
45
|
+
<dce-text xmlns="" data-dce-id="6">
|
|
46
|
+
/* light/dark */
|
|
47
|
+
</dce-text>
|
|
48
|
+
<span xmlns="" data-dce-id="7">
|
|
49
|
+
<xsl:for-each select="$cem-palette-emotion/xhtml:tr">
|
|
50
|
+
<xsl:variable name="emotion" select="xhtml:td[1]"/>
|
|
51
|
+
<xsl:variable name="light-val" select="xhtml:td[3]"/>
|
|
52
|
+
<xsl:variable name="dark-val" select="xhtml:td[4]"/>
|
|
53
|
+
<span data-dce-id="8">
|
|
54
|
+
<xsl:choose>
|
|
55
|
+
<xsl:when test="$dark-val">
|
|
56
|
+
<xsl:value-of select="$emotion"/>: light-dark(var( $light-val ), var( $dark-val ) );
|
|
57
|
+
</xsl:when>
|
|
58
|
+
<xsl:otherwise>
|
|
59
|
+
<xsl:value-of select="$emotion"/>: var( $light-val );
|
|
60
|
+
</xsl:otherwise>
|
|
61
|
+
</xsl:choose>
|
|
62
|
+
</span>
|
|
63
|
+
</xsl:for-each>
|
|
64
|
+
</span>
|
|
65
|
+
<dce-text xmlns="" data-dce-id="9">
|
|
66
|
+
/* override for native */
|
|
67
|
+
.cem-theme-native,[data-theme="cem-theme-native"]{
|
|
68
|
+
</dce-text>
|
|
69
|
+
<span xmlns="" data-dce-id="10">
|
|
70
|
+
<xsl:for-each select="$cem-palette-emotion/xhtml:tr">
|
|
71
|
+
<xsl:variable name="emotion" select="xhtml:td[1]"/>
|
|
72
|
+
<xsl:variable name="light-val" select="xhtml:td[5]"/>
|
|
73
|
+
<xsl:variable name="dark-val" select="xhtml:td[6]"/>
|
|
74
|
+
<span data-dce-id="11">
|
|
75
|
+
<xsl:choose>
|
|
76
|
+
<xsl:when test="$dark-val">
|
|
77
|
+
<xsl:value-of select="$emotion"/>: light-dark(var( $light-val ), var( $dark-val ) );
|
|
78
|
+
</xsl:when>
|
|
79
|
+
<xsl:otherwise>
|
|
80
|
+
<xsl:value-of select="$emotion"/>: var( $light-val );
|
|
81
|
+
</xsl:otherwise>
|
|
82
|
+
</xsl:choose>
|
|
83
|
+
</span>
|
|
84
|
+
</xsl:for-each>
|
|
85
|
+
</span>
|
|
86
|
+
<dce-text xmlns="" data-dce-id="12">
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
</dce-text>
|
|
90
|
+
</xsl:variable>
|
|
91
|
+
<pre xmlns="" class="language-css" data-dce-id="13">
|
|
92
|
+
<code class="language-css" data-dce-id="14">
|
|
93
|
+
<xsl:value-of select="$css-body"/>
|
|
94
|
+
</code>
|
|
95
|
+
</pre>
|
|
96
|
+
<cem-css-loader xmlns="" value="{$css-body}" data-dce-id="15"/>
|
|
97
|
+
<xsl:for-each xmlns:xsl="http://www.w3.org/1999/XSL/Transform" select="$cem-palette-emotion/xhtml:tr">
|
|
98
|
+
<xsl:variable name="emotion" select="xhtml:td[1]"/>
|
|
99
|
+
<xsl:variable name="light-val" select="xhtml:td[5]"/>
|
|
100
|
+
<xsl:variable name="dark-val" select="xhtml:td[6]"/>
|
|
101
|
+
<span xmlns="" data-dce-id="16">
|
|
102
|
+
<xsl:choose>
|
|
103
|
+
<xsl:when test="$dark-val">
|
|
104
|
+
<xsl:value-of select="$emotion"/>: light-dark(var( $light-val ), var( $dark-val ) );
|
|
105
|
+
</xsl:when>
|
|
106
|
+
<xsl:otherwise>
|
|
107
|
+
<xsl:value-of select="$emotion"/>: var( $light-val );
|
|
108
|
+
</xsl:otherwise>
|
|
109
|
+
</xsl:choose>
|
|
110
|
+
</span>
|
|
111
|
+
</xsl:for-each>
|
|
368
112
|
</dce-root>
|
|
369
113
|
</xsl:template>
|
|
370
114
|
<xsl:template match="/">
|
package/ide/web-types-dce.json
CHANGED
package/ide/web-types-xsl.json
CHANGED
package/package.json
CHANGED