Skip to content

refactor(text): DLT-3302 tone prop uses css variables instead of css utilities #1197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Francis Rupert (francisrupert) merged 2 commits into from
Apr 14, 2026
Merged

refactor(text): DLT-3302 tone prop uses css variables instead of css utilities #1197

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
16a6d09
change DtText tone to use css variables instead of utility classes
francisrupert Apr 13, 2026
65aca4b
remove success tone variants and simplify inverted handling
francisrupert Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/combinator/src/components/renderer/renderer_target.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ function renderTarget () {
*/
function renderError (exception, container) {
render(h(DtNotice, {
kind: 'error',
kind: 'critical',
hideClose: true,
title: ERROR_MESSAGE,
}, {
Expand Down
24 changes: 23 additions & 1 deletion packages/dialtone-css/lib/build/less/components/text.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,12 @@
//
@layer dialtone.components {
.d-text {
--text-tone: currentColor;

// ============================================================================
// $ BASE STYLE
// ----------------------------------------------------------------------------
color: inherit;
color: oklch(from var(--text-tone) l c h / var(--fco, alpha));

// ============================================================================
// $ TEXT STYLES
Expand Down Expand Up @@ -214,5 +216,25 @@

&--lh-600,
&--lh-600.d-text { line-height: var(--dt-font-line-height-600); }

// ============================================================================
// $ TONE MODIFIERS
// ----------------------------------------------------------------------------

&--tone-primary { --text-tone: var(--dt-color-foreground-primary); }
&--tone-secondary { --text-tone: var(--dt-color-foreground-secondary); }
&--tone-tertiary { --text-tone: var(--dt-color-foreground-tertiary); }
&--tone-muted { --text-tone: var(--dt-color-foreground-muted); }
&--tone-disabled { --text-tone: var(--dt-color-foreground-disabled); }
&--tone-placeholder { --text-tone: var(--dt-color-foreground-placeholder); }
&--tone-critical { --text-tone: var(--dt-color-foreground-critical); }
&--tone-critical-strong { --text-tone: var(--dt-color-foreground-critical-strong); }
&--tone-positive { --text-tone: var(--dt-color-foreground-positive); }
&--tone-positive-strong { --text-tone: var(--dt-color-foreground-positive-strong); }
&--tone-success { --text-tone: var(--dt-color-foreground-success); }
&--tone-success-strong { --text-tone: var(--dt-color-foreground-success-strong); }
&--tone-warning { --text-tone: var(--dt-color-foreground-warning); }
&--tone-neutral-black { --text-tone: var(--dt-color-neutral-black); }
&--tone-neutral-white { --text-tone: var(--dt-color-neutral-white); }
}
}
3 changes: 1 addition & 2 deletions packages/dialtone-vue/components/text/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ export {
TEXT_SIZE_MODIFIERS,
TEXT_HEADLINE_ONLY_SIZES,
TEXT_ALIGN_MODIFIERS,
TEXT_TONE_PREFIX,
TEXT_TONE_TOKENS,
TEXT_TONE_MODIFIERS,
Comment thread
francisrupert marked this conversation as resolved.
TEXT_NUMERIC_CLASS,
TEXT_TRUNCATE_CLASS,
TEXT_LINE_CLAMP_CLASS,
Expand Down
56 changes: 0 additions & 56 deletions packages/dialtone-vue/components/text/scripts/update-text-tone-tokens.cjs
View file
Open in desktop

This file was deleted.

40 changes: 0 additions & 40 deletions packages/dialtone-vue/components/text/scripts/update_text_tone_tokens.cjs
View file
Open in desktop

This file was deleted.

Empty file removed packages/dialtone-vue/components/text/scripts/update_text_tone_tokens.js
View file
Open in desktop
Empty file.
5 changes: 4 additions & 1 deletion packages/dialtone-vue/components/text/text.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
TEXT_KIND_MODIFIERS,
TEXT_SIZE_MODIFIERS,
TEXT_ALIGN_MODIFIERS,
TEXT_TONE_MODIFIERS,
TEXT_STRENGTH_MODIFIERS,
TEXT_DENSITY_MODIFIERS,
TEXT_WRAP_MODIFIERS,
Expand All @@ -19,6 +20,7 @@ const alignOptions = [undefined, ...Object.keys(TEXT_ALIGN_MODIFIERS)];
const strengthOptions = [undefined, ...Object.keys(TEXT_STRENGTH_MODIFIERS)];
const densityOptions = [undefined, ...Object.keys(TEXT_DENSITY_MODIFIERS)];
const wrapOptions = [undefined, ...Object.keys(TEXT_WRAP_MODIFIERS)];
const toneOptions = [undefined, ...Object.keys(TEXT_TONE_MODIFIERS)];
const textBoxTrimOptions = [undefined, ...Object.keys(TEXT_BOX_TRIM_MODIFIERS)];

export const argsData = {
Expand Down Expand Up @@ -63,7 +65,8 @@ export const argTypesData = {
control: { type: 'select' },
},
tone: {
control: 'text',
options: toneOptions,
control: { type: 'select' },
},
align: {
options: alignOptions,
Expand Down
9 changes: 5 additions & 4 deletions packages/dialtone-vue/components/text/text.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
TEXT_LINE_CLAMP_CLASS,
TEXT_NUMERIC_CLASS,
TEXT_TRUNCATE_CLASS,
TEXT_TONE_MODIFIERS,
TEXT_WRAP_MODIFIERS,
TEXT_BOX_TRIM_MODIFIERS,
TEXT_STRENGTH_MODIFIERS,
Expand Down Expand Up @@ -110,13 +111,13 @@ describe('DtText', () => {
it('applies tone modifier class', () => {
const wrapper = mountComponent({ tone: 'primary' });

expect(wrapper.classes()).toContain('d-fc-primary');
expect(wrapper.classes()).toContain(TEXT_TONE_MODIFIERS.primary);
});

it('applies positive tone modifier class', () => {
const wrapper = mountComponent({ tone: 'positive' });

expect(wrapper.classes()).toContain('d-fc-positive');
expect(wrapper.classes()).toContain(TEXT_TONE_MODIFIERS.positive);
});


Expand All @@ -127,7 +128,7 @@ describe('DtText', () => {
const wrapper = mountComponent({ tone: 'not-real' });

expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('Unsupported tone'));
expect(wrapper.classes()).not.toContain('d-fc-not-real');
expect(wrapper.classes()).not.toContain('d-text--tone-not-real');
});

it('applies align modifier class when align prop is valid', () => {
Expand Down Expand Up @@ -165,7 +166,7 @@ describe('DtText', () => {
'd-text-headline--lg',
TEXT_STRENGTH_MODIFIERS.semibold,
TEXT_DENSITY_MODIFIERS[300],
'd-fc-primary',
TEXT_TONE_MODIFIERS.primary,
'd-text--align-center',
TEXT_WRAP_MODIFIERS.balance,
TEXT_BOX_TRIM_MODIFIERS.both,
Expand Down
23 changes: 10 additions & 13 deletions packages/dialtone-vue/components/text/text.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,7 @@ import {
TEXT_SIZE_MAP,
TEXT_HEADLINE_ONLY_SIZES,
TEXT_ALIGN_MODIFIERS,
TEXT_TONE_PREFIX,
TEXT_TONE_TOKENS,
TEXT_TONE_MODIFIERS,
TEXT_NUMERIC_CLASS,
TEXT_TRUNCATE_CLASS,
TEXT_LINE_CLAMP_CLASS,
Expand Down Expand Up @@ -80,11 +79,15 @@ export default {
},

/**
* Aligns to available foreground color tokens, e.g. `tertiary`, `critical`, `positive`, etc.
* Semantic foreground color.
* @values primary, secondary, tertiary, muted, disabled, placeholder, critical, critical-strong, positive, positive-strong, success, success-strong, warning, neutral-black, neutral-white
*/
tone: {
type: String,
default: null,
validator: (value) => {
return value === null || Object.prototype.hasOwnProperty.call(TEXT_TONE_MODIFIERS, value);
},
},

/**
Expand All @@ -94,6 +97,9 @@ export default {
align: {
type: String,
default: null,
validator: (value) => {
return value === null || Object.prototype.hasOwnProperty.call(TEXT_ALIGN_MODIFIERS, value);
},
},

/**
Expand Down Expand Up @@ -316,16 +322,7 @@ export default {
},

getToneClass () {
if (!this.tone) {
return null;
}

if (!TEXT_TONE_TOKENS.includes(this.tone)) {
console.warn(`[DtText] Unsupported tone "${this.tone}".`);
return null;
}

return `${TEXT_TONE_PREFIX}${this.tone}`;
return this.getModifierClass(this.tone, TEXT_TONE_MODIFIERS, 'tone');
},

getWrapClass () {
Expand Down
24 changes: 18 additions & 6 deletions packages/dialtone-vue/components/text/text_constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,23 @@ export const TEXT_SIZE_MAP = {
700: '3xl',
};

import TEXT_TONE_TOKENS from './text_tone_tokens.js';
export { TEXT_TONE_TOKENS };
export const TEXT_TONE_MODIFIERS = {
'primary': 'd-text--tone-primary',
'secondary': 'd-text--tone-secondary',
'tertiary': 'd-text--tone-tertiary',
'muted': 'd-text--tone-muted',
Comment thread
francisrupert marked this conversation as resolved.
'disabled': 'd-text--tone-disabled',
'placeholder': 'd-text--tone-placeholder',
'critical': 'd-text--tone-critical',
'critical-strong': 'd-text--tone-critical-strong',
'positive': 'd-text--tone-positive',
'positive-strong': 'd-text--tone-positive-strong',
'success': 'd-text--tone-success',
'success-strong': 'd-text--tone-success-strong',
Comment thread
francisrupert marked this conversation as resolved.
Outdated
'warning': 'd-text--tone-warning',
'neutral-black': 'd-text--tone-neutral-black',
'neutral-white': 'd-text--tone-neutral-white',
};

export const TEXT_ALIGN_MODIFIERS = {
start: 'd-text--align-start',
Expand All @@ -36,8 +51,6 @@ export const TEXT_ALIGN_MODIFIERS = {
justify: 'd-text--align-justify',
};

export const TEXT_TONE_PREFIX = 'd-fc-';

export const TEXT_NUMERIC_CLASS = 'd-text--numeric';
export const TEXT_TRUNCATE_CLASS = 'd-truncate';
export const TEXT_LINE_CLAMP_CLASS = 'd-text--clamp';
Expand Down Expand Up @@ -75,9 +88,8 @@ export default {
TEXT_KIND_MODIFIERS,
TEXT_SIZE_MODIFIERS,
TEXT_HEADLINE_ONLY_SIZES,
TEXT_TONE_TOKENS,
TEXT_TONE_MODIFIERS,
TEXT_ALIGN_MODIFIERS,
TEXT_TONE_PREFIX,
TEXT_NUMERIC_CLASS,
TEXT_TRUNCATE_CLASS,
TEXT_LINE_CLAMP_CLASS,
Expand Down
32 changes: 0 additions & 32 deletions packages/dialtone-vue/components/text/text_tone_tokens.js
View file
Open in desktop
Comment thread
francisrupert marked this conversation as resolved.
Outdated

This file was deleted.

29 changes: 0 additions & 29 deletions packages/dialtone-vue/components/text/text_tone_tokens.json
View file
Open in desktop

This file was deleted.

Loading
Loading