Skip to content

Commit 65c99bb

Browse files
RobbertRobbert
committed
WIP
1 parent dea1ecf commit 65c99bb

1 file changed

Lines changed: 10 additions & 10 deletions

File tree

‎src/main.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -181,14 +181,14 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
181181
<div>
182182
<p>Default font family:</p>
183183
<ul>
184-
${fontFamilies.map(({ name, recommended }) => `<li><utrecht-button type="button" appearance="subtle-button" name="basis.typography.font-family.default" value="'${name}'" onclick="themeBuilder.setToken(event.target)"><span class="example-font-sample" style="font-family: '${name}'">${name}</span></utrecht-button>${recommended ? ' (recommended)' : ''}</li>`).join('\n')}
184+
${fontFamilies.map(({ name, recommended }) => `<li><utrecht-button type="button" appearance="subtle-button" name="basis.typography.font-family.default" value="'${name}'" onclick="themeBuilder.setToken(event.target)"><span class="example-font-sample" style="font-family: '${name}'">${name}</span></utrecht-button>${recommended ? ' <utrecht-data-badge>recommended</utrecht-data-badge>' : ''}</li>`).join('\n')}
185185
</ul>
186186
</div>
187187
<div>
188188
<p>Form control border radius:</p>
189189
<utrecht-textbox></utrecht-textbox>
190190
<ul>
191-
<li><utrecht-button type="button" appearance="secondary-action-button" name="basis.form-control.border-radius" value="0" onclick="themeBuilder.setToken(event.target)">Square corners</utrecht-button> (recommended)</li>
191+
<li><utrecht-button type="button" appearance="secondary-action-button" name="basis.form-control.border-radius" value="0" onclick="themeBuilder.setToken(event.target)">Square corners</utrecht-button> <utrecht-data-badge>recommended</utrecht-data-badge></li>
192192
<li><utrecht-button type="button" appearance="secondary-action-button" name="basis.form-control.border-radius" value="{basis.border-radius.sm}" onclick="themeBuilder.setToken(event.target)">Small</utrecht-button></li>
193193
<li><utrecht-button type="button" appearance="secondary-action-button" name="basis.form-control.border-radius" value="{basis.border-radius.md}" onclick="themeBuilder.setToken(event.target)">Medium</utrecht-button></li>
194194
<li><utrecht-button type="button" appearance="secondary-action-button" name="basis.form-control.border-radius" value="{basis.border-radius.lg}" onclick="themeBuilder.setToken(event.target)">Large</utrecht-button></li>
@@ -208,22 +208,22 @@ Repellendus assumenda eveniet qui. Ab eum et ut et odit quia. Voluptates rerum e
208208
<ul>
209209
<li><utrecht-button type="button" appearance="secondary-action-button" value='${JSON.stringify(formControlPaddingBlockZero)}' onclick="themeBuilder.setTokens(event.target)">No padding</utrecht-button></li>
210210
<li><utrecht-button type="button" appearance="secondary-action-button" value='${JSON.stringify(formControlPaddingBlockSmall)}' onclick="themeBuilder.setTokens(event.target)">Small</utrecht-button></li>
211-
<li><utrecht-button type="button" appearance="secondary-action-button" value='${JSON.stringify(formControlPaddingBlockMedium)}' onclick="themeBuilder.setTokens(event.target)">Medium</utrecht-button> (recommended)</li>
211+
<li><utrecht-button type="button" appearance="secondary-action-button" value='${JSON.stringify(formControlPaddingBlockMedium)}' onclick="themeBuilder.setTokens(event.target)">Medium</utrecht-button> <utrecht-data-badge>recommended</utrecht-data-badge></li>
212212
<li><utrecht-button type="button" appearance="secondary-action-button" value='${JSON.stringify(formControlPaddingBlockLarge)}' onclick="themeBuilder.setTokens(event.target)">Large</utrecht-button></li>
213213
</ul>
214214
<p>Form control padding left and right:</p>
215215
<ul>
216216
<li><utrecht-button type="button" appearance="secondary-action-button" value='${JSON.stringify(formControlPaddingInlineZero)}' onclick="themeBuilder.setTokens(event.target)">No padding</utrecht-button></li>
217217
<li><utrecht-button type="button" appearance="secondary-action-button" value='${JSON.stringify(formControlPaddingInlineSmall)}' onclick="themeBuilder.setTokens(event.target)">Small</utrecht-button></li>
218-
<li><utrecht-button type="button" appearance="secondary-action-button" value='${JSON.stringify(formControlPaddingInlineMedium)}' onclick="themeBuilder.setTokens(event.target)">Medium</utrecht-button> (recommended)</li>
218+
<li><utrecht-button type="button" appearance="secondary-action-button" value='${JSON.stringify(formControlPaddingInlineMedium)}' onclick="themeBuilder.setTokens(event.target)">Medium</utrecht-button> <utrecht-data-badge>recommended</utrecht-data-badge></li>
219219
<li><utrecht-button type="button" appearance="secondary-action-button" value='${JSON.stringify(formControlPaddingInlineLarge)}' onclick="themeBuilder.setTokens(event.target)">Large</utrecht-button></li>
220220
</ul>
221221
</div>
222222
<div>
223223
<p>Button border radius:</p>
224224
<ul>
225225
<li><utrecht-button type="button" appearance="secondary-action-button" name="utrecht.button.border-radius" value="0" onclick="themeBuilder.setToken(event.target)">Square corners</utrecht-button></li>
226-
<li><utrecht-button type="button" appearance="secondary-action-button" name="utrecht.button.border-radius" value=onclick="themeBuilder.setToken(event.target)">Small</utrecht-button> (recommended)</li>
226+
<li><utrecht-button type="button" appearance="secondary-action-button" name="utrecht.button.border-radius" value=onclick="themeBuilder.setToken(event.target)">Small</utrecht-button> <utrecht-data-badge>recommended</utrecht-data-badge></li>
227227
<li><utrecht-button type="button" appearance="secondary-action-button" name="utrecht.button.border-radius" value="{basis.border-radius.md}" onclick="themeBuilder.setToken(event.target)">Medium</utrecht-button></li>
228228
<li><utrecht-button type="button" appearance="secondary-action-button" name="utrecht.button.border-radius" value="{basis.border-radius.lg}" onclick="themeBuilder.setToken(event.target)">Large</utrecht-button></li>
229229
<li><utrecht-button type="button" appearance="secondary-action-button" name="utrecht.button.border-radius" value="{basis.border-radius.round}" onclick="themeBuilder.setToken(event.target)">Round</utrecht-button></li>
@@ -233,7 +233,7 @@ Repellendus assumenda eveniet qui. Ab eum et ut et odit quia. Voluptates rerum e
233233
<p>Button border width:</p>
234234
<utrecht-textbox></utrecht-textbox>
235235
<ul>
236-
<li><utrecht-button type="button" appearance="secondary-action-button" name="utrecht.button.border-width" value="{basis.border-width.sm}" onclick="themeBuilder.setToken(event.target)">Small</utrecht-button> (recommended)</li>
236+
<li><utrecht-button type="button" appearance="secondary-action-button" name="utrecht.button.border-width" value="{basis.border-width.sm}" onclick="themeBuilder.setToken(event.target)">Small</utrecht-button> <utrecht-data-badge>recommended</utrecht-data-badge></li>
237237
<li><utrecht-button type="button" appearance="secondary-action-button" name="utrecht.button.border-width" value="{basis.border-width.md}" onclick="themeBuilder.setToken(event.target)">Medium</utrecht-button></li>
238238
</ul>
239239
</div>
@@ -243,13 +243,13 @@ Repellendus assumenda eveniet qui. Ab eum et ut et odit quia. Voluptates rerum e
243243
<li><utrecht-button type="button" appearance="primary-action-button" value='${JSON.stringify(primaryButton1)}' onclick="themeBuilder.setTokens(event.target)">Plain with border</utrecht-button></li>
244244
<li><utrecht-button type="button" appearance="primary-action-button" value='${JSON.stringify(primaryButton2)}' onclick="themeBuilder.setTokens(event.target)">Plain without border</utrecht-button></li>
245245
<li><utrecht-button type="button" appearance="primary-action-button" value='${JSON.stringify(primaryButton3)}' onclick="themeBuilder.setTokens(event.target)">Inverse with border</utrecht-button></li>
246-
<li><utrecht-button type="button" appearance="primary-action-button" value='${JSON.stringify(primaryButton4)}' onclick="themeBuilder.setTokens(event.target)">Inverse without border</utrecht-button> (recommended)</li>
246+
<li><utrecht-button type="button" appearance="primary-action-button" value='${JSON.stringify(primaryButton4)}' onclick="themeBuilder.setTokens(event.target)">Inverse without border</utrecht-button> <utrecht-data-badge>recommended</utrecht-data-badge></li>
247247
</ul>
248248
</div>
249249
<div>
250250
<p>Secondary button style:</p>
251251
<ul>
252-
<li><utrecht-button type="button" appearance="secondary-action-button" value='${JSON.stringify(secondaryButton1)}' onclick="themeBuilder.setTokens(event.target)">Plain with border</utrecht-button> (recommended)</li>
252+
<li><utrecht-button type="button" appearance="secondary-action-button" value='${JSON.stringify(secondaryButton1)}' onclick="themeBuilder.setTokens(event.target)">Plain with border</utrecht-button> <utrecht-data-badge>recommended</utrecht-data-badge></li>
253253
<li><utrecht-button type="button" appearance="secondary-action-button" value='${JSON.stringify(secondaryButton2)}' onclick="themeBuilder.setTokens(event.target)">Plain without border</utrecht-button></li>
254254
<li><utrecht-button type="button" appearance="secondary-action-button" value='${JSON.stringify(secondaryButton3)}' onclick="themeBuilder.setTokens(event.target)">Inverse with border</utrecht-button></li>
255255
<li><utrecht-button type="button" appearance="secondary-action-button" value='${JSON.stringify(secondaryButton4)}' onclick="themeBuilder.setTokens(event.target)">Inverse without border</utrecht-button></li>
@@ -263,7 +263,7 @@ Repellendus assumenda eveniet qui. Ab eum et ut et odit quia. Voluptates rerum e
263263
<li><utrecht-button type="button" appearance="subtle-button" value='${JSON.stringify(subtleButton3)}' onclick="themeBuilder.setTokens(event.target)">Inverse with border</utrecht-button></li>
264264
<li><utrecht-button type="button" appearance="subtle-button" value='${JSON.stringify(subtleButton4)}' onclick="themeBuilder.setTokens(event.target)">Inverse without border</utrecht-button></li>
265265
<li><utrecht-button type="button" appearance="subtle-button" value='${JSON.stringify(subtleButton5)}' onclick="themeBuilder.setTokens(event.target)">Transparent without border</utrecht-button></li>
266-
<li><utrecht-button type="button" appearance="subtle-button" value='${JSON.stringify(subtleButton6)}' onclick="themeBuilder.setTokens(event.target)">Transparent with border</utrecht-button> (recommended)</li>
266+
<li><utrecht-button type="button" appearance="subtle-button" value='${JSON.stringify(subtleButton6)}' onclick="themeBuilder.setTokens(event.target)">Transparent with border</utrecht-button> <utrecht-data-badge>recommended</utrecht-data-badge></li>
267267
</ul>
268268
</div>
269269
<div>
@@ -276,7 +276,7 @@ Repellendus assumenda eveniet qui. Ab eum et ut et odit quia. Voluptates rerum e
276276
</figure>
277277
<ul>
278278
<li><utrecht-button type="button" appearance="secondary-button" value='${JSON.stringify(aaTargetSize)}' onclick="themeBuilder.setTokens(event.target)">WCAG Level AA: 24px</utrecht-button></li>
279-
<li><utrecht-button type="button" appearance="secondary-button" value='${JSON.stringify(aaaTargetSize)}' onclick="themeBuilder.setTokens(event.target)">WCAG Level AAA: 44px</utrecht-button> (recommended)</li>
279+
<li><utrecht-button type="button" appearance="secondary-button" value='${JSON.stringify(aaaTargetSize)}' onclick="themeBuilder.setTokens(event.target)">WCAG Level AAA: 44px</utrecht-button> <utrecht-data-badge>recommended</utrecht-data-badge></li>
280280
<li><utrecht-button type="button" appearance="secondary-button" value='${JSON.stringify(materialTargetSize)}' onclick="themeBuilder.setTokens(event.target)">Material Design: 48px</utrecht-button></li>
281281
</ul>
282282
</div>

0 commit comments

Comments
 (0)