@dialpad/dialtone-tokens 1.23.1 → 1.23.2

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 (15) hide show
  1. package/dist/android/java/tokens-dark.kt +11 -4
  2. package/dist/android/java/tokens-light.kt +13 -6
  3. package/dist/android/res/values/colors-dark.xml +11 -1
  4. package/dist/android/res/values/colors-light.xml +13 -3
  5. package/dist/android/res/values/dimens.xml +1 -4
  6. package/dist/css/variables-dark.css +194 -184
  7. package/dist/css/variables-light.css +196 -186
  8. package/dist/doc.json +10802 -10168
  9. package/dist/ios/tokens-dark.swift +11 -4
  10. package/dist/ios/tokens-light.swift +13 -6
  11. package/dist/less/variables-dark.less +194 -184
  12. package/dist/less/variables-light.less +196 -186
  13. package/dist/tokens-dark.json +11 -4
  14. package/dist/tokens-light.json +12 -5
  15. package/package.json +10 -11
package/dist/less/variables-light.less CHANGED
@@ -1,194 +1,16 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 08 Sep 2023 20:38:01 GMT
3
+ // Generated on Thu, 02 Nov 2023 22:15:51 GMT
4
4
 
5
- @dt-color-neutral-white: #ffffff;
6
- @dt-color-neutral-black: #000000;
7
- @dt-color-neutral-transparent: transparent;
8
- @dt-color-black-100: #F9F9F9;
9
- @dt-color-black-200: #E9E9E9;
10
- @dt-color-black-300: #D2D2D2;
11
- @dt-color-black-400: #AAAAAA;
12
- @dt-color-black-500: #808080;
13
- @dt-color-black-600: #555555;
14
- @dt-color-black-700: #3A3A3A;
15
- @dt-color-black-800: #222222;
16
- @dt-color-black-900: #000000;
17
- @dt-color-purple-100: #F5F0FF;
18
- @dt-color-purple-200: #DAC7FF;
19
- @dt-color-purple-300: #AB7EFF;
20
- @dt-color-purple-400: #7C52FF;
21
- @dt-color-purple-500: #3A1D95;
22
- @dt-color-purple-600: #10022C;
23
- @dt-color-blue-100: #EAF2FA;
24
- @dt-color-blue-200: #99C8FF;
25
- @dt-color-blue-300: #51A0FE;
26
- @dt-color-blue-400: #1768C6;
27
- @dt-color-blue-500: #01326D;
28
- @dt-color-magenta-100: #FFE0F2;
29
- @dt-color-magenta-200: #F985C7;
30
- @dt-color-magenta-300: #F9008E;
31
- @dt-color-magenta-400: #8C0E56;
32
- @dt-color-magenta-500: #541A3B;
33
- @dt-color-gold-100: #FFF4CC;
34
- @dt-color-gold-200: #FFDB80;
35
- @dt-color-gold-300: #F6AB3C;
36
- @dt-color-gold-400: #D28F2B;
37
- @dt-color-gold-500: #815008;
38
- @dt-color-green-100: #EDF9EB;
39
- @dt-color-green-200: #B0FFA3;
40
- @dt-color-green-300: #45F777;
41
- @dt-color-green-400: #1AA340;
42
- @dt-color-green-500: #124620;
43
- @dt-color-red-100: #FFE5E6;
44
- @dt-color-red-200: #FF8585;
45
- @dt-color-red-300: #EC0E0E;
46
- @dt-color-red-400: #B70B0B;
47
- @dt-color-red-500: #5B0505;
48
- @dt-color-tan-100: #F2F0EE;
49
- @dt-color-tan-200: #CEC8C4;
50
- @dt-color-tan-300: #87807B;
51
- @dt-color-tan-400: #3F3D3C;
52
- @dt-color-tan-500: #121212;
53
- @dt-color-gradient-magenta-purple: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
54
- @dt-color-brand-purple: #7C52FF;
55
- @dt-color-brand-magenta: #F9008E;
56
- @dt-color-foreground-primary: #000000; // Default text color throughout the UI.
57
- @dt-color-foreground-secondary: #3A3A3A; // Example uses include introduction paragraphs, labels, and descriptions paired with form elements.
58
- @dt-color-foreground-tertiary: #555555; // Used to imply visual hierarchy relative to primary and secondary text colors, e.g. headlines and labels.
59
- @dt-color-foreground-muted: hsl(0 0% 13.3% / 0.5);
60
- @dt-color-foreground-placeholder: #808080; // Text color for placeholder text within form elements.
61
- @dt-color-foreground-disabled: #808080; // Used for text paired with disabled content or components, like the form elements.
62
- @dt-color-foreground-critical: #EC0E0E; // Expresses an error, danger, or otherwise critical state.
63
- @dt-color-foreground-critical-strong: #B70B0B; // Expresses an error, danger, or otherwise critical state on surfaces that require a stronger contrast.
64
- @dt-color-foreground-success: #1AA340; // Indicates a positive state.
65
- @dt-color-foreground-success-strong: #124620; // Indicates a strong positive state on surfaces that require a stronger contrast.
66
- @dt-color-foreground-warning: #815008; // Indicates information that requires user’s attention and further action may be necessary.
67
- @dt-color-foreground-primary-inverted: #ffffff; // Primary text that sits on high-contrast surfaces or backgrounds.
68
- @dt-color-foreground-secondary-inverted: #E9E9E9; // Secondary text color that sits on high-contrast surfaces or backgrounds.
69
- @dt-color-foreground-tertiary-inverted: #D2D2D2; // Tertiary text color that sits on high-contrast surfaces or backgrounds.
70
- @dt-color-foreground-muted-inverted: hsl(0 0% 91.4% / 0.6); // Muted text color that sits on high-contrast surfaces or backgrounds.
71
- @dt-color-foreground-placeholder-inverted: #808080; // Placeholder text color that sits on high-contrast surfaces or backgrounds.
72
- @dt-color-foreground-disabled-inverted: #808080; // Disabled text color that sits on high-contrast surfaces or backgrounds.
73
- @dt-color-foreground-critical-inverted: #FF8585; // Critical text that sits on high-contrast surfaces or backgrounds
74
- @dt-color-foreground-critical-strong-inverted: hsl(0 100% 82.1%); // Critical strong text that sits on high-contrast surfaces or backgrounds
75
- @dt-color-foreground-success-inverted: #B0FFA3; // Success text that sits on high-contrast surfaces or backgrounds
76
- @dt-color-foreground-success-strong-inverted: hsl(112 100% 90.1%); // Success strong text that sits on high-contrast surfaces or backgrounds
77
- @dt-color-foreground-warning-inverted: #FFF4CC; // Warning text that sits on high-contrast surfaces or backgrounds
78
- @dt-color-link-primary: #7C52FF;
79
- @dt-color-link-critical: #EC0E0E;
80
- @dt-color-link-success: #1AA340; // positive
81
- @dt-color-link-warning: #815008;
82
- @dt-color-link-muted: #3A3A3A;
83
- @dt-color-link-disabled: #808080;
84
- @dt-color-link-primary-inverted: #AB7EFF;
85
- @dt-color-link-critical-inverted: #FF8585;
86
- @dt-color-link-success-inverted: #B0FFA3;
87
- @dt-color-link-warning-inverted: #FFF4CC;
88
- @dt-color-link-muted-inverted: #E9E9E9;
89
- @dt-color-link-disabled-inverted: #808080;
90
- @dt-color-link-primary-hover: #3A1D95;
91
- @dt-color-link-critical-hover: #B70B0B;
92
- @dt-color-link-success-hover: #124620;
93
- @dt-color-link-warning-hover: #555555;
94
- @dt-color-link-muted-hover: #000000;
95
- @dt-color-link-disabled-hover: #808080;
96
- @dt-color-link-primary-inverted-hover: #DAC7FF;
97
- @dt-color-link-critical-inverted-hover: hsl(0 100% 82.1%);
98
- @dt-color-link-success-inverted-hover: hsl(112 100% 90.1%);
99
- @dt-color-link-warning-inverted-hover: #F9F9F9;
100
- @dt-color-link-muted-inverted-hover: #F9F9F9;
101
- @dt-color-link-disabled-inverted-hover: #808080;
102
- @dt-color-surface-secondary-opaque: hsl(0 0% 0% / 0.02); // Secondary surface as opaque background color.
103
- @dt-color-surface-moderate-opaque: hsl(0 0% 0% / 0.09); // Moderate surface as opaque background color.
104
- @dt-color-surface-bold-opaque: hsl(0 0% 0% / 0.18); // Bold surface as opaque background color.
105
- @dt-color-surface-strong-opaque: hsl(0 0% 0% / 0.67); // Strong surface as opaque background color.
106
- @dt-color-surface-contrast-opaque: hsl(0 0% 0% / 0.87); // Contrast surface as opaque background color.
107
- @dt-color-surface-backdrop: hsl(0 0% 0% / 0.7); // Background color for a modal-like backdrop.
108
- @dt-color-surface-critical-opaque: hsl(0 88.8% 49% / 0.11); // Critical surface as opaque background color.
109
- @dt-color-surface-critical-subtle-opaque: hsl(0 88.8% 49% / 0.05); // Critical subtle surface as opaque background color.
110
- @dt-color-surface-warning-opaque: hsl(43 100% 75.1% / 0.38); // Warning surface as opaque background color
111
- @dt-color-surface-warning-subtle-opaque: hsl(43 100% 75.1% / 0.18); // Warning subtle surface as opaque background color
112
- @dt-color-surface-success-opaque: hsl(137 72.5% 37.1% / 0.08); // Success surface as opaque background color.
113
- @dt-color-surface-success-subtle-opaque: hsl(137 72.5% 37.1% / 0.03); // Success subtle surface as opaque background color.
114
- @dt-color-surface-info-opaque: hsl(212 79.2% 43.3% / 0.09); // Info surface as opaque background color.
115
- @dt-color-surface-info-subtle-opaque: hsl(212 79.2% 43.3% / 0.04); // Info surface as opaque background color.
116
- @dt-color-surface-primary: #ffffff; // Default surface color for the majority of surfaces.
117
- @dt-color-surface-secondary: #F9F9F9; // For adjacent or complementary regions.
118
- @dt-color-surface-moderate: #E9E9E9; // A tertiary surface level, prominent without being too overpowering.
119
- @dt-color-surface-bold: #D2D2D2; // Highlight or call attention to specific areas of the interface.
120
- @dt-color-surface-strong: #555555; // Use sparingly to draw the eye to a relatively important region.
121
- @dt-color-surface-contrast: #222222; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
122
- @dt-color-surface-critical: #FFE5E6; // Background surface color containing error, danger, or otherwise critical messaging or elements.
123
- @dt-color-surface-critical-subtle: hsl(358 100% 97.5%); // A softer version of the Critical surface.
124
- @dt-color-surface-critical-strong: #B70B0B; // A contrasting critical surface, most likely paired with inverted foreground colors.
125
- @dt-color-surface-warning: #FFF4CC; // Background surface color highlighting messaging or elements that may require user's attention.
126
- @dt-color-surface-warning-subtle: hsl(47.1 100% 95%); // A softer version of the default warning surface.
127
- @dt-color-surface-warning-strong: #FFDB80; // A contrasting warning surface, most likely paired with inverted foreground colors.
128
- @dt-color-surface-success: #EDF9EB; // Background surface color containing messaging or elements expressing a positive or successful state.
129
- @dt-color-surface-success-subtle: hsl(111 53.8% 98%); // A softer version of the default success surface.
130
- @dt-color-surface-success-strong: #1AA340; // A contrasting positive state surface, most likely paired with inverted foreground colors.
131
- @dt-color-surface-info: #EAF2FA; // Background surface color containing messaging or elements communicated as generally informational.
132
- @dt-color-surface-info-subtle: hsl(210 61.5% 97.5%); // A softer version of the default informational surface.
133
- @dt-color-surface-info-strong: #1768C6; // A contrasting informational surface, most likely paired with inverted foreground colors.
134
- @dt-color-border-subtle: hsl(0 0% 0% / 0.1);
135
- @dt-color-border-default: hsl(0 0% 0% / 0.18);
136
- @dt-color-border-moderate: hsl(0 0% 0% / 0.34);
137
- @dt-color-border-bold: hsl(0 0% 0% / 0.5);
138
- @dt-color-border-subtle-inverted: hsl(0 0% 100% / 0.14);
139
- @dt-color-border-default-inverted: hsl(0 0% 100% / 0.22);
140
- @dt-color-border-moderate-inverted: hsl(0 0% 100% / 0.38);
141
- @dt-color-border-bold-inverted: hsl(0 0% 100% / 0.5);
142
- @dt-color-border-focus: #51A0FE;
143
- @dt-color-border-critical: #EC0E0E;
144
- @dt-color-border-success: #1AA340;
145
- @dt-color-border-warning: #D28F2B;
146
- @dt-color-border-brand: #7C52FF;
147
- @dt-color-border-ai: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
148
- @dt-color-border-accent: #F9008E;
149
- @dt-color-border-critical-subtle: #FF8585;
150
- @dt-color-border-critical-strong: #B70B0B;
151
- @dt-color-border-success-subtle: #B0FFA3;
152
- @dt-color-border-success-strong: #124620;
153
- @dt-color-border-warning-subtle: #FFDB80;
154
- @dt-color-border-warning-strong: hsl(35.7 88.3% 21.5%);
155
- @dt-color-border-brand-subtle: #DAC7FF;
156
- @dt-color-border-brand-strong: #3A1D95;
157
- @dt-color-border-critical-inverted: #FF8585;
158
- @dt-color-border-success-inverted: #B0FFA3;
159
- @dt-color-border-warning-inverted: #FFDB80;
160
- @dt-color-border-brand-inverted: #7C52FF;
161
- @dt-color-border-critical-subtle-inverted: #B70B0B;
162
- @dt-color-border-critical-strong-inverted: #FFE5E6;
163
- @dt-color-border-success-subtle-inverted: #1AA340;
164
- @dt-color-border-success-strong-inverted: #EDF9EB;
165
- @dt-color-border-warning-subtle-inverted: #D28F2B;
166
- @dt-color-border-warning-strong-inverted: #FFF4CC;
167
- @dt-color-border-brand-subtle-inverted: #3A1D95;
168
- @dt-color-border-brand-strong-inverted: #DAC7FF;
169
- @dt-opacity-0: 0;
170
- @dt-opacity-100: 0.05;
171
- @dt-opacity-200: 0.1;
172
- @dt-opacity-300: 0.2;
173
- @dt-opacity-400: 0.25;
174
- @dt-opacity-500: 0.3;
175
- @dt-opacity-600: 0.4;
176
- @dt-opacity-700: 0.5;
177
- @dt-opacity-800: 0.6;
178
- @dt-opacity-900: 0.7;
179
- @dt-opacity-1000: 0.75;
180
- @dt-opacity-1100: 0.8;
181
- @dt-opacity-1200: 0.9;
182
- @dt-opacity-1300: 1;
183
- @dt-font-family-body: -apple-system, BlinkMacSystemFont, '"SF Pro"', '"Segoe UI Adjusted"', '"Segoe UI"', SFMono, '"Helvetica Neue"', Cantarell, Ubuntu, Roboto, Arial, '"Noto Sans"', sans-serif, '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"';
184
- @dt-font-family-expressive: Archivo,-apple-system, BlinkMacSystemFont, '"SF Pro"', '"Segoe UI Adjusted"', '"Segoe UI"', SFMono, '"Helvetica Neue"', Cantarell, Ubuntu, Roboto, Arial, '"Noto Sans"', sans-serif, '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"';
185
- @dt-font-family-mono: SFMono-Regular, '"SF Mono"', Consolas, '"Liberation Mono"', Menlo, Courier, monospace;
186
5
  @dt-font-size-100: 1.2rem; // small
187
6
  @dt-font-size-200: 1.5rem; // medium / base
188
7
  @dt-font-size-300: 1.9rem; // large
189
8
  @dt-font-size-400: 2.7rem; // extra large / xl
190
9
  @dt-font-size-500: 3.8rem; // extra large / xxl
191
10
  @dt-font-size-root: 1rem;
11
+ @dt-font-family-body: -apple-system, BlinkMacSystemFont, '"SF Pro"', '"Segoe UI Adjusted"', '"Segoe UI"', SFMono, '"Helvetica Neue"', Cantarell, Ubuntu, Roboto, Arial, '"Noto Sans"', sans-serif, '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"';
12
+ @dt-font-family-expressive: Archivo,-apple-system, BlinkMacSystemFont, '"SF Pro"', '"Segoe UI Adjusted"', '"Segoe UI"', SFMono, '"Helvetica Neue"', Cantarell, Ubuntu, Roboto, Arial, '"Noto Sans"', sans-serif, '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"';
13
+ @dt-font-family-mono: SFMono-Regular, '"SF Mono"', Consolas, '"Liberation Mono"', Menlo, Courier, monospace;
192
14
  @dt-font-line-height-100: 1;
193
15
  @dt-font-line-height-200: 1.2;
194
16
  @dt-font-line-height-300: 1.4;
@@ -245,6 +67,7 @@
245
67
  @dt-size-1130: 134rem;
246
68
  @dt-size-1150: 153.6rem;
247
69
  @dt-size-1200: 204.8rem;
70
+ @dt-size-base: 0.8rem;
248
71
  @dt-size-50-negative: -0.05rem;
249
72
  @dt-size-100-negative: -0.1rem;
250
73
  @dt-size-200-negative: -0.2rem;
@@ -303,7 +126,6 @@
303
126
  @dt-size-90-percent: 90%;
304
127
  @dt-size-95-percent: 95%;
305
128
  @dt-size-100-percent: 100%;
306
- @dt-size-base: 0.8rem;
307
129
  @dt-size-border-0: 0rem;
308
130
  @dt-size-border-50: 0.05rem;
309
131
  @dt-size-border-100: 0.1rem;
@@ -363,6 +185,7 @@
363
185
  @dt-space-1130: 134rem;
364
186
  @dt-space-1150: 153.6rem;
365
187
  @dt-space-1200: 204.8rem;
188
+ @dt-space-base: 0.8rem;
366
189
  @dt-space-50-negative: -0.05rem;
367
190
  @dt-space-100-negative: -0.1rem;
368
191
  @dt-space-200-negative: -0.2rem;
@@ -421,7 +244,184 @@
421
244
  @dt-space-90-percent: 90%;
422
245
  @dt-space-95-percent: 95%;
423
246
  @dt-space-100-percent: 100%;
424
- @dt-space-base: 0.8rem;
247
+ @dt-color-neutral-white: #ffffff;
248
+ @dt-color-neutral-black: #000000;
249
+ @dt-color-neutral-transparent: transparent;
250
+ @dt-color-black-100: #F9F9F9;
251
+ @dt-color-black-200: #E9E9E9;
252
+ @dt-color-black-300: #D2D2D2;
253
+ @dt-color-black-400: #AAAAAA;
254
+ @dt-color-black-500: #808080;
255
+ @dt-color-black-600: #555555;
256
+ @dt-color-black-700: #3A3A3A;
257
+ @dt-color-black-800: #222222;
258
+ @dt-color-black-900: #000000;
259
+ @dt-color-purple-100: #F5F0FF;
260
+ @dt-color-purple-200: #DAC7FF;
261
+ @dt-color-purple-300: #AB7EFF;
262
+ @dt-color-purple-400: #7C52FF;
263
+ @dt-color-purple-500: #3A1D95;
264
+ @dt-color-purple-600: #10022C;
265
+ @dt-color-blue-100: #EAF2FA;
266
+ @dt-color-blue-200: #99C8FF;
267
+ @dt-color-blue-300: #51A0FE;
268
+ @dt-color-blue-400: #1768C6;
269
+ @dt-color-blue-500: #01326D;
270
+ @dt-color-magenta-100: #FFE0F2;
271
+ @dt-color-magenta-200: #F985C7;
272
+ @dt-color-magenta-300: #F9008E;
273
+ @dt-color-magenta-400: #8C0E56;
274
+ @dt-color-magenta-500: #541A3B;
275
+ @dt-color-gold-100: #FFF4CC;
276
+ @dt-color-gold-200: #FFDB80;
277
+ @dt-color-gold-300: #F6AB3C;
278
+ @dt-color-gold-400: #D28F2B;
279
+ @dt-color-gold-500: #815008;
280
+ @dt-color-green-100: #EDF9EB;
281
+ @dt-color-green-200: #B0FFA3;
282
+ @dt-color-green-300: #45F777;
283
+ @dt-color-green-400: #1AA340;
284
+ @dt-color-green-500: #124620;
285
+ @dt-color-red-100: #FFE5E6;
286
+ @dt-color-red-200: #FF8585;
287
+ @dt-color-red-300: #EC0E0E;
288
+ @dt-color-red-400: #B70B0B;
289
+ @dt-color-red-500: #5B0505;
290
+ @dt-color-tan-100: #F2F0EE;
291
+ @dt-color-tan-200: #CEC8C4;
292
+ @dt-color-tan-300: #87807B;
293
+ @dt-color-tan-400: #3F3D3C;
294
+ @dt-color-tan-500: #121212;
295
+ @dt-color-gradient-magenta-purple: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
296
+ @dt-color-brand-purple: #7C52FF;
297
+ @dt-color-brand-magenta: #F9008E;
298
+ @dt-color-foreground-primary: #000000; // Default text color throughout the UI.
299
+ @dt-color-foreground-secondary: #3A3A3A; // Example uses include introduction paragraphs, labels, and descriptions paired with form elements.
300
+ @dt-color-foreground-tertiary: #555555; // Used to imply visual hierarchy relative to primary and secondary text colors, e.g. headlines and labels.
301
+ @dt-color-foreground-muted: hsl(0 0% 13.3% / 0.5);
302
+ @dt-color-foreground-placeholder: #808080; // Text color for placeholder text within form elements.
303
+ @dt-color-foreground-disabled: #808080; // Used for text paired with disabled content or components, like the form elements.
304
+ @dt-color-foreground-critical: #EC0E0E; // Expresses an error, danger, or otherwise critical state.
305
+ @dt-color-foreground-critical-strong: #B70B0B; // Expresses an error, danger, or otherwise critical state on surfaces that require a stronger contrast.
306
+ @dt-color-foreground-success: #1AA340; // Indicates a positive state.
307
+ @dt-color-foreground-success-strong: #124620; // Indicates a strong positive state on surfaces that require a stronger contrast.
308
+ @dt-color-foreground-warning: #815008; // Indicates information that requires user’s attention and further action may be necessary.
309
+ @dt-color-foreground-primary-inverted: #ffffff; // Primary text that sits on high-contrast surfaces or backgrounds.
310
+ @dt-color-foreground-secondary-inverted: #E9E9E9; // Secondary text color that sits on high-contrast surfaces or backgrounds.
311
+ @dt-color-foreground-tertiary-inverted: #D2D2D2; // Tertiary text color that sits on high-contrast surfaces or backgrounds.
312
+ @dt-color-foreground-muted-inverted: hsl(0 0% 91.4% / 0.6); // Muted text color that sits on high-contrast surfaces or backgrounds.
313
+ @dt-color-foreground-placeholder-inverted: #808080; // Placeholder text color that sits on high-contrast surfaces or backgrounds.
314
+ @dt-color-foreground-disabled-inverted: #808080; // Disabled text color that sits on high-contrast surfaces or backgrounds.
315
+ @dt-color-foreground-critical-inverted: #FF8585; // Critical text that sits on high-contrast surfaces or backgrounds
316
+ @dt-color-foreground-critical-strong-inverted: hsl(0 100% 82.1%); // Critical strong text that sits on high-contrast surfaces or backgrounds
317
+ @dt-color-foreground-success-inverted: #B0FFA3; // Success text that sits on high-contrast surfaces or backgrounds
318
+ @dt-color-foreground-success-strong-inverted: hsl(112 100% 90.1%); // Success strong text that sits on high-contrast surfaces or backgrounds
319
+ @dt-color-foreground-warning-inverted: #FFF4CC; // Warning text that sits on high-contrast surfaces or backgrounds
320
+ @dt-color-link-primary: #7C52FF;
321
+ @dt-color-link-critical: #EC0E0E;
322
+ @dt-color-link-success: #1AA340; // positive
323
+ @dt-color-link-warning: #815008;
324
+ @dt-color-link-muted: #3A3A3A;
325
+ @dt-color-link-disabled: #808080;
326
+ @dt-color-link-primary-inverted: #AB7EFF;
327
+ @dt-color-link-critical-inverted: #FF8585;
328
+ @dt-color-link-success-inverted: #B0FFA3;
329
+ @dt-color-link-warning-inverted: #FFF4CC;
330
+ @dt-color-link-muted-inverted: #E9E9E9;
331
+ @dt-color-link-disabled-inverted: #808080;
332
+ @dt-color-link-primary-hover: #3A1D95;
333
+ @dt-color-link-critical-hover: #B70B0B;
334
+ @dt-color-link-success-hover: #124620;
335
+ @dt-color-link-warning-hover: #555555;
336
+ @dt-color-link-muted-hover: #000000;
337
+ @dt-color-link-disabled-hover: #808080;
338
+ @dt-color-link-primary-inverted-hover: #DAC7FF;
339
+ @dt-color-link-critical-inverted-hover: hsl(0 100% 82.1%);
340
+ @dt-color-link-success-inverted-hover: hsl(112 100% 90.1%);
341
+ @dt-color-link-warning-inverted-hover: #F9F9F9;
342
+ @dt-color-link-muted-inverted-hover: #F9F9F9;
343
+ @dt-color-link-disabled-inverted-hover: #808080;
344
+ @dt-color-surface-secondary-opaque: hsl(0 0% 0% / 0.02); // Secondary surface as opaque background color.
345
+ @dt-color-surface-moderate-opaque: hsl(0 0% 0% / 0.09); // Moderate surface as opaque background color.
346
+ @dt-color-surface-bold-opaque: hsl(0 0% 0% / 0.18); // Bold surface as opaque background color.
347
+ @dt-color-surface-strong-opaque: hsl(0 0% 0% / 0.67); // Strong surface as opaque background color.
348
+ @dt-color-surface-contrast-opaque: hsl(0 0% 0% / 0.87); // Contrast surface as opaque background color.
349
+ @dt-color-surface-backdrop: hsl(0 0% 0% / 0.7); // Background color for a modal-like backdrop.
350
+ @dt-color-surface-critical-opaque: hsl(0 88.8% 49% / 0.11); // Critical surface as opaque background color.
351
+ @dt-color-surface-critical-subtle-opaque: hsl(0 88.8% 49% / 0.05); // Critical subtle surface as opaque background color.
352
+ @dt-color-surface-warning-opaque: hsl(43 100% 75.1% / 0.38); // Warning surface as opaque background color
353
+ @dt-color-surface-warning-subtle-opaque: hsl(43 100% 75.1% / 0.18); // Warning subtle surface as opaque background color
354
+ @dt-color-surface-success-opaque: hsl(137 72.5% 37.1% / 0.08); // Success surface as opaque background color.
355
+ @dt-color-surface-success-subtle-opaque: hsl(137 72.5% 37.1% / 0.03); // Success subtle surface as opaque background color.
356
+ @dt-color-surface-info-opaque: hsl(212 79.2% 43.3% / 0.09); // Info surface as opaque background color.
357
+ @dt-color-surface-info-subtle-opaque: hsl(212 79.2% 43.3% / 0.04); // Info surface as opaque background color.
358
+ @dt-color-surface-primary: #ffffff; // Default surface color for the majority of surfaces.
359
+ @dt-color-surface-secondary: #F9F9F9; // For adjacent or complementary regions.
360
+ @dt-color-surface-moderate: #E9E9E9; // A tertiary surface level, prominent without being too overpowering.
361
+ @dt-color-surface-bold: #D2D2D2; // Highlight or call attention to specific areas of the interface.
362
+ @dt-color-surface-strong: #555555; // Use sparingly to draw the eye to a relatively important region.
363
+ @dt-color-surface-contrast: #222222; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
364
+ @dt-color-surface-critical: #FFE5E6; // Background surface color containing error, danger, or otherwise critical messaging or elements.
365
+ @dt-color-surface-critical-subtle: hsl(358 100% 97.5%); // A softer version of the Critical surface.
366
+ @dt-color-surface-critical-strong: #B70B0B; // A contrasting critical surface, most likely paired with inverted foreground colors.
367
+ @dt-color-surface-warning: #FFF4CC; // Background surface color highlighting messaging or elements that may require user's attention.
368
+ @dt-color-surface-warning-subtle: hsl(47.1 100% 95%); // A softer version of the default warning surface.
369
+ @dt-color-surface-warning-strong: #FFDB80; // A contrasting warning surface, most likely paired with inverted foreground colors.
370
+ @dt-color-surface-success: #EDF9EB; // Background surface color containing messaging or elements expressing a positive or successful state.
371
+ @dt-color-surface-success-subtle: hsl(111 53.8% 98%); // A softer version of the default success surface.
372
+ @dt-color-surface-success-strong: #1AA340; // A contrasting positive state surface, most likely paired with inverted foreground colors.
373
+ @dt-color-surface-info: #EAF2FA; // Background surface color containing messaging or elements communicated as generally informational.
374
+ @dt-color-surface-info-subtle: hsl(210 61.5% 97.5%); // A softer version of the default informational surface.
375
+ @dt-color-surface-info-strong: #1768C6; // A contrasting informational surface, most likely paired with inverted foreground colors.
376
+ @dt-color-border-subtle: hsl(0 0% 0% / 0.1);
377
+ @dt-color-border-default: hsl(0 0% 0% / 0.18);
378
+ @dt-color-border-moderate: hsl(0 0% 0% / 0.34);
379
+ @dt-color-border-bold: hsl(0 0% 0% / 0.5);
380
+ @dt-color-border-subtle-inverted: hsl(0 0% 100% / 0.14);
381
+ @dt-color-border-default-inverted: hsl(0 0% 100% / 0.22);
382
+ @dt-color-border-moderate-inverted: hsl(0 0% 100% / 0.38);
383
+ @dt-color-border-bold-inverted: hsl(0 0% 100% / 0.5);
384
+ @dt-color-border-focus: #51A0FE;
385
+ @dt-color-border-critical: #EC0E0E;
386
+ @dt-color-border-success: #1AA340;
387
+ @dt-color-border-warning: #D28F2B;
388
+ @dt-color-border-brand: #7C52FF;
389
+ @dt-color-border-ai: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
390
+ @dt-color-border-accent: #F9008E;
391
+ @dt-color-border-critical-subtle: #FF8585;
392
+ @dt-color-border-critical-strong: #B70B0B;
393
+ @dt-color-border-success-subtle: #B0FFA3;
394
+ @dt-color-border-success-strong: #124620;
395
+ @dt-color-border-warning-subtle: #FFDB80;
396
+ @dt-color-border-warning-strong: hsl(35.7 88.3% 21.5%);
397
+ @dt-color-border-brand-subtle: #DAC7FF;
398
+ @dt-color-border-brand-strong: #3A1D95;
399
+ @dt-color-border-critical-inverted: #FF8585;
400
+ @dt-color-border-success-inverted: #B0FFA3;
401
+ @dt-color-border-warning-inverted: #FFDB80;
402
+ @dt-color-border-brand-inverted: #7C52FF;
403
+ @dt-color-border-critical-subtle-inverted: #B70B0B;
404
+ @dt-color-border-critical-strong-inverted: #FFE5E6;
405
+ @dt-color-border-success-subtle-inverted: #1AA340;
406
+ @dt-color-border-success-strong-inverted: #EDF9EB;
407
+ @dt-color-border-warning-subtle-inverted: #D28F2B;
408
+ @dt-color-border-warning-strong-inverted: #FFF4CC;
409
+ @dt-color-border-brand-subtle-inverted: #3A1D95;
410
+ @dt-color-border-brand-strong-inverted: #DAC7FF;
411
+ @dt-opacity-0: 0;
412
+ @dt-opacity-100: .05;
413
+ @dt-opacity-200: .1;
414
+ @dt-opacity-300: .2;
415
+ @dt-opacity-400: .25;
416
+ @dt-opacity-500: .3;
417
+ @dt-opacity-600: .4;
418
+ @dt-opacity-700: .5;
419
+ @dt-opacity-800: .6;
420
+ @dt-opacity-900: .7;
421
+ @dt-opacity-1000: .75;
422
+ @dt-opacity-1100: .8;
423
+ @dt-opacity-1200: .9;
424
+ @dt-opacity-1300: 1;
425
425
  @dt-shadow-small-1-x: 0rem;
426
426
  @dt-shadow-small-1-y: 0.2rem;
427
427
  @dt-shadow-small-1-blur: 0.4rem;
@@ -660,6 +660,10 @@
660
660
  @dt-action-color-foreground-muted-hover: #3A3A3A;
661
661
  @dt-action-color-foreground-muted-active: #3A3A3A;
662
662
  @dt-action-color-foreground-disabled-default: #808080;
663
+ @dt-action-color-foreground-positive-default: #1AA340;
664
+ @dt-action-color-foreground-positive-hover: hsl(137 72.5% 30.4%);
665
+ @dt-action-color-foreground-positive-active: hsl(137 72.5% 30.4%);
666
+ @dt-action-color-foreground-positive-primary-default: #ffffff;
663
667
  @dt-action-color-background-base-default: transparent;
664
668
  @dt-action-color-background-base-hover: hsl(255 100% 66.1% / 0.14);
665
669
  @dt-action-color-background-base-active: hsl(255 100% 66.1% / 0.18);
@@ -667,8 +671,8 @@
667
671
  @dt-action-color-background-base-primary-hover: hsl(255 100% 63.4%);
668
672
  @dt-action-color-background-base-primary-active: hsl(255 100% 60.8%);
669
673
  @dt-action-color-background-critical-default: transparent;
670
- @dt-action-color-background-critical-hover: hsl(0 88.8% 49% / 0.03);
671
- @dt-action-color-background-critical-active: hsl(0 88.8% 49% / 0.09);
674
+ @dt-action-color-background-critical-hover: hsl(0 88.8% 49% / 0.07);
675
+ @dt-action-color-background-critical-active: hsl(0 88.8% 49% / 0.12);
672
676
  @dt-action-color-background-critical-primary-default: #EC0E0E;
673
677
  @dt-action-color-background-critical-primary-hover: hsl(0 88.8% 45.1%);
674
678
  @dt-action-color-background-critical-primary-active: hsl(0 88.8% 43.1%);
@@ -682,6 +686,12 @@
682
686
  @dt-action-color-background-muted-hover: hsl(0 0% 13.3% / 0.1);
683
687
  @dt-action-color-background-muted-active: hsl(0 0% 13.3% / 0.16);
684
688
  @dt-action-color-background-disabled-default: #D2D2D2;
689
+ @dt-action-color-background-positive-default: transparent;
690
+ @dt-action-color-background-positive-hover: hsl(111 53.8% 98%);
691
+ @dt-action-color-background-positive-active: hsl(137 72.5% 37.1% / 0.08);
692
+ @dt-action-color-background-positive-primary-default: #1AA340;
693
+ @dt-action-color-background-positive-primary-hover: hsl(137 72.5% 33.4%);
694
+ @dt-action-color-background-positive-primary-active: hsl(137 72.5% 31.1%);
685
695
  @dt-action-color-border-base-outlined-default: #7C52FF;
686
696
  @dt-action-color-border-critical-outlined-default: #EC0E0E;
687
697
  @dt-action-color-border-inverted-outlined-default: #F9F9F9;
package/dist/tokens-dark.json CHANGED
@@ -263,6 +263,10 @@
263
263
  "dtActionColorForegroundMutedHover": "#C2C2C2",
264
264
  "dtActionColorForegroundMutedActive": "#C2C2C2",
265
265
  "dtActionColorForegroundDisabledDefault": "#AAAAAA",
266
+ "dtActionColorForegroundPositiveDefault": "#B0FFA3",
267
+ "dtActionColorForegroundPositiveHover": "#6eff58",
268
+ "dtActionColorForegroundPositiveActive": "#6eff58",
269
+ "dtActionColorForegroundPositivePrimaryDefault": "#ffffff",
266
270
  "dtActionColorBackgroundBaseHover": "#ab7eff1a",
267
271
  "dtActionColorBackgroundBaseActive": "#ab7eff33",
268
272
  "dtActionColorBackgroundBaseDefault": "transparent",
@@ -285,6 +289,12 @@
285
289
  "dtActionColorBackgroundMutedHover": "#d4d4d41a",
286
290
  "dtActionColorBackgroundMutedActive": "#d4d4d429",
287
291
  "dtActionColorBackgroundDisabledDefault": "#3A3A3A",
292
+ "dtActionColorBackgroundPositiveDefault": "transparent",
293
+ "dtActionColorBackgroundPositiveHover": "#79dc93",
294
+ "dtActionColorBackgroundPositiveActive": "#afffa314",
295
+ "dtActionColorBackgroundPositivePrimaryDefault": "#B0FFA3",
296
+ "dtActionColorBackgroundPositivePrimaryHover": "#8bff79",
297
+ "dtActionColorBackgroundPositivePrimaryActive": "#75ff60",
288
298
  "dtActionColorBorderBaseOutlinedDefault": "#AB7EFF",
289
299
  "dtActionColorBorderCriticalOutlinedDefault": "#FF8585",
290
300
  "dtActionColorBorderInvertedOutlinedDefault": "#000000",
@@ -570,7 +580,6 @@
570
580
  "dtSize90Percent": "90%",
571
581
  "dtSize95Percent": "95%",
572
582
  "dtSize100Percent": "100%",
573
- "dtSizeBase": "0.5rem",
574
583
  "dtSizeRadius0": "0",
575
584
  "dtSizeRadius100": "0.0625rem",
576
585
  "dtSizeRadius200": "0.125rem",
@@ -782,7 +791,6 @@
782
791
  "dtFontSize300": "1.1875rem",
783
792
  "dtFontSize400": "1.6875rem",
784
793
  "dtFontSize500": "2.375rem",
785
- "dtFontSizeRoot": "0.625rem",
786
794
  "dtFontLineHeight100": "1",
787
795
  "dtFontLineHeight200": "1.2",
788
796
  "dtFontLineHeight300": "1.4",
@@ -896,6 +904,5 @@
896
904
  "dtSpace80Percent": "80%",
897
905
  "dtSpace90Percent": "90%",
898
906
  "dtSpace95Percent": "95%",
899
- "dtSpace100Percent": "100%",
900
- "dtSpaceBase": "0.5rem"
907
+ "dtSpace100Percent": "100%"
901
908
  }
package/dist/tokens-light.json CHANGED
@@ -463,7 +463,6 @@
463
463
  "dtSize90Percent": "90%",
464
464
  "dtSize95Percent": "95%",
465
465
  "dtSize100Percent": "100%",
466
- "dtSizeBase": "0.5rem",
467
466
  "dtSizeRadius0": "0",
468
467
  "dtSizeRadius100": "0.0625rem",
469
468
  "dtSizeRadius200": "0.125rem",
@@ -516,6 +515,10 @@
516
515
  "dtActionColorForegroundMutedHover": "#3A3A3A",
517
516
  "dtActionColorForegroundMutedActive": "#3A3A3A",
518
517
  "dtActionColorForegroundDisabledDefault": "#808080",
518
+ "dtActionColorForegroundPositiveDefault": "#1AA340",
519
+ "dtActionColorForegroundPositiveHover": "#158635",
520
+ "dtActionColorForegroundPositiveActive": "#158635",
521
+ "dtActionColorForegroundPositivePrimaryDefault": "#ffffff",
519
522
  "dtActionColorBackgroundBaseDefault": "transparent",
520
523
  "dtActionColorBackgroundBaseHover": "#7d52ff24",
521
524
  "dtActionColorBackgroundBaseActive": "#7d52ff2e",
@@ -523,8 +526,8 @@
523
526
  "dtActionColorBackgroundBasePrimaryHover": "#7344ff",
524
527
  "dtActionColorBackgroundBasePrimaryActive": "#6937ff",
525
528
  "dtActionColorBackgroundCriticalDefault": "transparent",
526
- "dtActionColorBackgroundCriticalHover": "#ec0e0e08",
527
- "dtActionColorBackgroundCriticalActive": "#ec0e0e17",
529
+ "dtActionColorBackgroundCriticalHover": "#ec0e0e12",
530
+ "dtActionColorBackgroundCriticalActive": "#ec0e0e1f",
528
531
  "dtActionColorBackgroundCriticalPrimaryDefault": "#EC0E0E",
529
532
  "dtActionColorBackgroundCriticalPrimaryHover": "#d90d0d",
530
533
  "dtActionColorBackgroundCriticalPrimaryActive": "#d00c0c",
@@ -538,6 +541,12 @@
538
541
  "dtActionColorBackgroundMutedHover": "#2222221a",
539
542
  "dtActionColorBackgroundMutedActive": "#22222229",
540
543
  "dtActionColorBackgroundDisabledDefault": "#D2D2D2",
544
+ "dtActionColorBackgroundPositiveDefault": "transparent",
545
+ "dtActionColorBackgroundPositiveHover": "#f8fdf7",
546
+ "dtActionColorBackgroundPositiveActive": "#1aa34114",
547
+ "dtActionColorBackgroundPositivePrimaryDefault": "#1AA340",
548
+ "dtActionColorBackgroundPositivePrimaryHover": "#17933a",
549
+ "dtActionColorBackgroundPositivePrimaryActive": "#168936",
541
550
  "dtActionColorBorderBaseOutlinedDefault": "#7C52FF",
542
551
  "dtActionColorBorderCriticalOutlinedDefault": "#EC0E0E",
543
552
  "dtActionColorBorderInvertedOutlinedDefault": "#F9F9F9",
@@ -602,7 +611,6 @@
602
611
  "dtFontSize300": "1.1875rem",
603
612
  "dtFontSize400": "1.6875rem",
604
613
  "dtFontSize500": "2.375rem",
605
- "dtFontSizeRoot": "0.625rem",
606
614
  "dtFontLineHeight100": "1",
607
615
  "dtFontLineHeight200": "1.2",
608
616
  "dtFontLineHeight300": "1.4",
@@ -717,7 +725,6 @@
717
725
  "dtSpace90Percent": "90%",
718
726
  "dtSpace95Percent": "95%",
719
727
  "dtSpace100Percent": "100%",
720
- "dtSpaceBase": "0.5rem",
721
728
  "dtShadowSmall0X": "0",
722
729
  "dtShadowSmall0Y": "0.125rem",
723
730
  "dtShadowSmall0Blur": "0.25rem",
package/package.json CHANGED
@@ -1,24 +1,15 @@
1
1
  {
2
2
  "name": "@dialpad/dialtone-tokens",
3
- "version": "1.23.1",
3
+ "version": "1.23.2",
4
4
  "description": "Design tokens for Dialtone.",
5
5
  "main": "index.js",
6
6
  "type": "module",
7
- "scripts": {
8
- "build": "npm run build:token-transformer && node ./build.js && cp ./AndroidManifest.xml dist/android && ./gradlew publishToMavenLocal -Pversion=$npm_package_version && ./build-ios.js",
9
- "build:token-transformer": "npm run build:token-transformer:light && npm run build:token-transformer:dark",
10
- "build:token-transformer:light": "token-transformer tokens token_transformer/tokens-light.json base/default,semantic/dp/default,components/checkbox,components/avatar/default,components/badge/default,components/checkbox/default,components/icon/default,components/radio/default --expandTypography=true --expandShadow=true",
11
- "build:token-transformer:dark": "token-transformer tokens token_transformer/tokens-dark.json base/default,base/dark,semantic/dp/default,semantic/dp/dark,components/avatar/default,components/badge/default,components/checkbox/default,components/checkbox/dark,components/icon/default,components/radio/default,components/radio/dark --expandTypography=true --expandShadow=true",
12
- "prepublishOnly": "npm run build",
13
- "release": "semantic-release --no-ci --extends ./release-local.config.cjs"
14
- },
15
7
  "files": [
16
8
  "dist"
17
9
  ],
18
10
  "publishConfig": {
19
11
  "access": "public"
20
12
  },
21
- "repository": "git@github.com:dialpad/dialtone-tokens.git",
22
13
  "author": "Dialpad",
23
14
  "license": "MIT",
24
15
  "bugs": {
@@ -34,6 +25,14 @@
34
25
  "@tokens-studio/sd-transforms": "^0.11.0",
35
26
  "maven": "^5.0.0",
36
27
  "style-dictionary": "^3.8.0",
28
+ "tinycolor2": "^1.6.0",
37
29
  "token-transformer": "^0.0.31"
30
+ },
31
+ "scripts": {
32
+ "build": "npm run build:token-transformer && node ./build.js && cp ./AndroidManifest.xml dist/android && ./gradlew publishToMavenLocal -Pversion=$npm_package_version && ./build-ios.js",
33
+ "build:token-transformer": "npm run build:token-transformer:light && npm run build:token-transformer:dark",
34
+ "build:token-transformer:light": "token-transformer tokens token_transformer/tokens-light.json root,base/default,semantic/dp/default,components/checkbox,components/avatar/default,components/badge/default,components/checkbox/default,components/icon/default,components/radio/default root --expandTypography=true --expandShadow=true",
35
+ "build:token-transformer:dark": "token-transformer tokens token_transformer/tokens-dark.json root,base/default,base/dark,semantic/dp/default,semantic/dp/dark,components/avatar/default,components/badge/default,components/checkbox/default,components/checkbox/dark,components/icon/default,components/radio/default,components/radio/dark root --expandTypography=true --expandShadow=true",
36
+ "release": "semantic-release --no-ci --extends ./release-local.config.cjs"
38
37
  }
39
- }
38
+ }