Skip to content

Commit f6265d5

Browse files
francisrupertfrancisrupert
authored
feat(tokens): DLT-3587 rename experimental numbered themes (#1402)
1 parent 9e82fc6 commit f6265d5

96 files changed

Lines changed: 666 additions & 783 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -100,13 +100,13 @@ Use these getters to drive picker UI (disable material options on locked brands)
100100

101101
##### Available Themes
102102

103-
50+ themes total. Pass theme modules to `initDialtoneTheme()` or `setBrand()`.
103+
50 themes total. Pass theme modules to `initDialtoneTheme()` or `setBrand()`.
104104

105-
**Standard:** dp, tmo, aegean, botany, buttercream, high-desert, melon, plum, sunflower, verdant-haze
105+
**Base:** dp (Dialpad — every other theme layers on top of it) · **Partner:** tmo
106106

107-
**Accessibility:** prota-deuter, trita
107+
**Standard:** aegean, alpine, arctic, aurora, autumn, blue-hour, botany, brick, buttercream, cactus-bloom, cayenne, cedar-grove, cobalt, copper, coral-reef, dragonfruit, eucalyptus, fjord, high-desert, inkberry, kiln, lavender, marigold, melon, mulberry, mushroom, nightshade, paprika, peach-blossom, plum, poppy-field, raincloud, rhubarb, rust-harbor, sea-glow, seashell, solstice, storm, sunflower, tropical-night, verdant-haze, wildflower, wineberry, winter-gold, woodland
108108

109-
**Experimental:** 101 through 137
109+
**Accessibility:** prota-deuter, trita
110110

111111
**Contrast:** high-contrast
112112

‎apps/dialtone-documentation/docs/.vuepress/theme/client.js‎

Lines changed: 50 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -306,128 +306,77 @@ async function importDocumentation (app) {
306306

307307
async function importDialtoneThemes (app) {
308308
try {
309-
console.info('Importing layered theme system - ALL 51 THEMES!');
309+
// Kicked off before the await below so all 50 modules load concurrently.
310+
const highContrastImport = import('@dialpad/dialtone-tokens/themes/high-contrast');
310311

311-
// Import all themes explicitly (Vite doesn't like dynamic imports)
312-
const themeModules = await Promise.all([
312+
// Keep every import path literal so Vite can resolve the complete theme set.
313+
// Material overrides are not theme modules — material switching is
314+
// attribute-driven against pre-bundled CSS imported at the top of this file.
315+
const brandModules = await Promise.all([
313316
// Base theme
314317
import('@dialpad/dialtone-tokens/themes/dp'),
315318
// Partner themes
316319
import('@dialpad/dialtone-tokens/themes/tmo'),
317320
// Color assistive themes
318321
import('@dialpad/dialtone-tokens/themes/prota-deuter'),
319322
import('@dialpad/dialtone-tokens/themes/trita'),
320-
// Named themes
323+
// Standard themes (alphabetical)
321324
import('@dialpad/dialtone-tokens/themes/aegean'),
325+
import('@dialpad/dialtone-tokens/themes/alpine'),
326+
import('@dialpad/dialtone-tokens/themes/arctic'),
327+
import('@dialpad/dialtone-tokens/themes/aurora'),
328+
import('@dialpad/dialtone-tokens/themes/autumn'),
329+
import('@dialpad/dialtone-tokens/themes/blue-hour'),
322330
import('@dialpad/dialtone-tokens/themes/botany'),
331+
import('@dialpad/dialtone-tokens/themes/brick'),
323332
import('@dialpad/dialtone-tokens/themes/buttercream'),
324-
import('@dialpad/dialtone-tokens/themes/ceruleo'),
333+
import('@dialpad/dialtone-tokens/themes/cactus-bloom'),
334+
import('@dialpad/dialtone-tokens/themes/cayenne'),
335+
import('@dialpad/dialtone-tokens/themes/cedar-grove'),
336+
import('@dialpad/dialtone-tokens/themes/cobalt'),
337+
import('@dialpad/dialtone-tokens/themes/copper'),
338+
import('@dialpad/dialtone-tokens/themes/coral-reef'),
339+
import('@dialpad/dialtone-tokens/themes/dragonfruit'),
340+
import('@dialpad/dialtone-tokens/themes/eucalyptus'),
341+
import('@dialpad/dialtone-tokens/themes/fjord'),
325342
import('@dialpad/dialtone-tokens/themes/high-desert'),
343+
import('@dialpad/dialtone-tokens/themes/inkberry'),
344+
import('@dialpad/dialtone-tokens/themes/kiln'),
345+
import('@dialpad/dialtone-tokens/themes/lavender'),
346+
import('@dialpad/dialtone-tokens/themes/marigold'),
326347
import('@dialpad/dialtone-tokens/themes/melon'),
348+
import('@dialpad/dialtone-tokens/themes/mulberry'),
349+
import('@dialpad/dialtone-tokens/themes/mushroom'),
350+
import('@dialpad/dialtone-tokens/themes/nightshade'),
351+
import('@dialpad/dialtone-tokens/themes/paprika'),
352+
import('@dialpad/dialtone-tokens/themes/peach-blossom'),
327353
import('@dialpad/dialtone-tokens/themes/plum'),
354+
import('@dialpad/dialtone-tokens/themes/poppy-field'),
355+
import('@dialpad/dialtone-tokens/themes/raincloud'),
356+
import('@dialpad/dialtone-tokens/themes/rhubarb'),
357+
import('@dialpad/dialtone-tokens/themes/rust-harbor'),
358+
import('@dialpad/dialtone-tokens/themes/sea-glow'),
359+
import('@dialpad/dialtone-tokens/themes/seashell'),
360+
import('@dialpad/dialtone-tokens/themes/solstice'),
361+
import('@dialpad/dialtone-tokens/themes/storm'),
328362
import('@dialpad/dialtone-tokens/themes/sunflower'),
363+
import('@dialpad/dialtone-tokens/themes/tropical-night'),
329364
import('@dialpad/dialtone-tokens/themes/verdant-haze'),
330-
// Numbered themes (not yet named)
331-
import('@dialpad/dialtone-tokens/themes/101'),
332-
import('@dialpad/dialtone-tokens/themes/102'),
333-
import('@dialpad/dialtone-tokens/themes/103'),
334-
import('@dialpad/dialtone-tokens/themes/104'),
335-
import('@dialpad/dialtone-tokens/themes/105'),
336-
import('@dialpad/dialtone-tokens/themes/106'),
337-
import('@dialpad/dialtone-tokens/themes/107'),
338-
import('@dialpad/dialtone-tokens/themes/108'),
339-
import('@dialpad/dialtone-tokens/themes/109'),
340-
import('@dialpad/dialtone-tokens/themes/110'),
341-
import('@dialpad/dialtone-tokens/themes/111'),
342-
import('@dialpad/dialtone-tokens/themes/112'),
343-
import('@dialpad/dialtone-tokens/themes/113'),
344-
import('@dialpad/dialtone-tokens/themes/114'),
345-
import('@dialpad/dialtone-tokens/themes/115'),
346-
import('@dialpad/dialtone-tokens/themes/116'),
347-
import('@dialpad/dialtone-tokens/themes/117'),
348-
import('@dialpad/dialtone-tokens/themes/118'),
349-
import('@dialpad/dialtone-tokens/themes/119'),
350-
import('@dialpad/dialtone-tokens/themes/120'),
351-
import('@dialpad/dialtone-tokens/themes/121'),
352-
import('@dialpad/dialtone-tokens/themes/122'),
353-
import('@dialpad/dialtone-tokens/themes/123'),
354-
import('@dialpad/dialtone-tokens/themes/124'),
355-
import('@dialpad/dialtone-tokens/themes/125'),
356-
import('@dialpad/dialtone-tokens/themes/126'),
357-
import('@dialpad/dialtone-tokens/themes/127'),
358-
import('@dialpad/dialtone-tokens/themes/128'),
359-
import('@dialpad/dialtone-tokens/themes/129'),
360-
import('@dialpad/dialtone-tokens/themes/130'),
361-
import('@dialpad/dialtone-tokens/themes/131'),
362-
import('@dialpad/dialtone-tokens/themes/132'),
363-
import('@dialpad/dialtone-tokens/themes/133'),
364-
import('@dialpad/dialtone-tokens/themes/134'),
365-
import('@dialpad/dialtone-tokens/themes/135'),
366-
import('@dialpad/dialtone-tokens/themes/136'),
367-
import('@dialpad/dialtone-tokens/themes/137'),
368-
// High contrast
369-
import('@dialpad/dialtone-tokens/themes/high-contrast'),
370-
// Material overrides are not theme modules — material switching is
371-
// attribute-driven against pre-bundled CSS imported at the top of this file.
365+
import('@dialpad/dialtone-tokens/themes/wildflower'),
366+
import('@dialpad/dialtone-tokens/themes/wineberry'),
367+
import('@dialpad/dialtone-tokens/themes/winter-gold'),
368+
import('@dialpad/dialtone-tokens/themes/woodland'),
372369
]);
370+
const highContrast = (await highContrastImport).default;
373371

374-
// Build themes object with same order as in Navbar
372+
// Each brand module carries its own id at brand.name, so there is no
373+
// separate list of ids to keep in sync with the imports above.
375374
const themes = {
376-
'dp': themeModules[0].default,
377-
'tmo': themeModules[1].default,
378-
'prota-deuter': themeModules[2].default,
379-
'trita': themeModules[3].default,
380-
'aegean': themeModules[4].default,
381-
'botany': themeModules[5].default,
382-
'buttercream': themeModules[6].default,
383-
'ceruleo': themeModules[7].default,
384-
'high-desert': themeModules[8].default,
385-
'melon': themeModules[9].default,
386-
'plum': themeModules[10].default,
387-
'sunflower': themeModules[11].default,
388-
'verdant-haze': themeModules[12].default,
389-
'101': themeModules[13].default,
390-
'102': themeModules[14].default,
391-
'103': themeModules[15].default,
392-
'104': themeModules[16].default,
393-
'105': themeModules[17].default,
394-
'106': themeModules[18].default,
395-
'107': themeModules[19].default,
396-
'108': themeModules[20].default,
397-
'109': themeModules[21].default,
398-
'110': themeModules[22].default,
399-
'111': themeModules[23].default,
400-
'112': themeModules[24].default,
401-
'113': themeModules[25].default,
402-
'114': themeModules[26].default,
403-
'115': themeModules[27].default,
404-
'116': themeModules[28].default,
405-
'117': themeModules[29].default,
406-
'118': themeModules[30].default,
407-
'119': themeModules[31].default,
408-
'120': themeModules[32].default,
409-
'121': themeModules[33].default,
410-
'122': themeModules[34].default,
411-
'123': themeModules[35].default,
412-
'124': themeModules[36].default,
413-
'125': themeModules[37].default,
414-
'126': themeModules[38].default,
415-
'127': themeModules[39].default,
416-
'128': themeModules[40].default,
417-
'129': themeModules[41].default,
418-
'130': themeModules[42].default,
419-
'131': themeModules[43].default,
420-
'132': themeModules[44].default,
421-
'133': themeModules[45].default,
422-
'134': themeModules[46].default,
423-
'135': themeModules[47].default,
424-
'136': themeModules[48].default,
425-
'137': themeModules[49].default,
426-
'high-contrast': themeModules[50].default,
375+
...Object.fromEntries(brandModules.map(({ default: theme }) => [theme.brand.name, theme])),
376+
'high-contrast': highContrast,
427377
};
428378

429-
const brandCount = Object.keys(themes).length - 1; // minus high-contrast
430-
console.info(`Successfully loaded ${brandCount} themes + high contrast`);
379+
console.info(`Loaded ${brandModules.length} brand themes + high contrast`);
431380

432381
app.provide('themes', themes);
433382
} catch (error) {

‎apps/dialtone-documentation/docs/.vuepress/theme/components/Navbar.vue‎

Lines changed: 12 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
>
8484
<template #anchor>
8585
<dt-button
86-
v-dt-tooltip:bottom="`Theme: ${capitalize(currentTheme)}`"
86+
v-dt-tooltip:bottom="`Theme: ${formatThemeName(currentTheme)}`"
8787
class="theme-toggle-button dialtone-shell-btn"
8888
importance="clear"
8989
kind="muted"
@@ -111,7 +111,7 @@
111111
navigation-type="arrow-keys"
112112
@click="setTheme('dp')"
113113
>
114-
Dialpad (DP)
114+
{{ formatThemeName('dp') }}
115115
<template #end>
116116
<dt-icon :class="{ 'd-o0': currentTheme !== 'dp' }" name="check" size="200" />
117117
</template>
@@ -132,7 +132,7 @@
132132
navigation-type="arrow-keys"
133133
@click="setTheme('tmo')"
134134
>
135-
T-Mobile (TMO)
135+
{{ formatThemeName('tmo') }}
136136
<template #end>
137137
<dt-icon :class="{ 'd-o0': currentTheme !== 'tmo' }" name="check" size="200" />
138138
</template>
@@ -149,38 +149,7 @@
149149
</dt-text>
150150
</template>
151151
<dt-list-item
152-
role="menuitem"
153-
navigation-type="arrow-keys"
154-
@click="setTheme('prota-deuter')"
155-
>
156-
Prota-Deuter
157-
<template #end>
158-
<dt-icon :class="{ 'd-o0': currentTheme !== 'prota-deuter' }" name="check" size="200" />
159-
</template>
160-
</dt-list-item>
161-
<dt-list-item
162-
role="menuitem"
163-
navigation-type="arrow-keys"
164-
@click="setTheme('trita')"
165-
>
166-
Trita
167-
<template #end>
168-
<dt-icon :class="{ 'd-o0': currentTheme !== 'trita' }" name="check" size="200" />
169-
</template>
170-
</dt-list-item>
171-
</dt-list-item-group>
172-
<dt-dropdown-separator />
173-
<dt-list-item-group
174-
heading=" "
175-
heading-class="d-px-100"
176-
>
177-
<template #heading>
178-
<dt-text as="label" kind="label" size="100" tone="tertiary">
179-
Named Themes
180-
</dt-text>
181-
</template>
182-
<dt-list-item
183-
v-for="themeName in namedThemes"
152+
v-for="themeName in colorAssistiveThemes"
184153
:key="themeName"
185154
role="menuitem"
186155
navigation-type="arrow-keys"
@@ -199,19 +168,19 @@
199168
>
200169
<template #heading>
201170
<dt-text as="label" kind="label" size="100" tone="tertiary">
202-
Experimental (37 themes)
171+
Standard Themes
203172
</dt-text>
204173
</template>
205174
<dt-list-item
206-
v-for="themeNum in numberedThemes"
207-
:key="themeNum"
175+
v-for="themeName in standardThemes"
176+
:key="themeName"
208177
role="menuitem"
209178
navigation-type="arrow-keys"
210-
@click="setTheme(themeNum)"
179+
@click="setTheme(themeName)"
211180
>
212-
Theme {{ themeNum }}
181+
{{ formatThemeName(themeName) }}
213182
<template #end>
214-
<dt-icon :class="{ 'd-o0': currentTheme !== themeNum }" name="check" size="200" />
183+
<dt-icon :class="{ 'd-o0': currentTheme !== themeName }" name="check" size="200" />
215184
</template>
216185
</dt-list-item>
217186
</dt-list-item-group>
@@ -440,8 +409,8 @@ const {
440409
setContrast,
441410
setMaterial,
442411
setTheme,
443-
namedThemes,
444-
numberedThemes,
412+
standardThemes,
413+
colorAssistiveThemes,
445414
formatThemeName,
446415
materials,
447416
currentMaterial,

‎apps/dialtone-documentation/docs/.vuepress/theme/composables/useThemeManager.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { inject, computed, onMounted, onUnmounted, ref } from 'vue';
2-
import { NAMED_THEMES, NUMBERED_THEMES, ALL_THEME_IDS } from '../constants/themes.js';
2+
import { STANDARD_THEMES, COLOR_ASSISTIVE_THEMES } from '../constants/themes.js';
33
import { formatThemeName } from '../utils/formatThemeName.js';
44
import {
55
setMode as setModeConfig,
@@ -121,7 +121,7 @@ export function useThemeManager(options = {}) {
121121
};
122122

123123
/**
124-
* Sets the brand theme (dp, tmo, numbered themes, etc.)
124+
* Sets the brand theme (dp, tmo, standard themes, etc.)
125125
* Only functional when includeThemes is true
126126
* @param {string} theme - The theme to set
127127
*/
@@ -284,9 +284,9 @@ export function useThemeManager(options = {}) {
284284
setTheme,
285285

286286
// Theme utilities (only when includeThemes is enabled)
287-
namedThemes: computed(() => NAMED_THEMES),
288-
numberedThemes: computed(() => NUMBERED_THEMES),
289-
allThemeIds: computed(() => ALL_THEME_IDS),
287+
// Static module constants — no computed wrapper, same as `materials` below.
288+
standardThemes: STANDARD_THEMES,
289+
colorAssistiveThemes: COLOR_ASSISTIVE_THEMES,
290290
formatThemeName,
291291

292292
// Constants

0 commit comments

Comments
 (0)