@dialpad/dialtone 9.100.0 → 9.101.0-rebrand-2025-beta.1

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 (98) hide show
  1. package/dist/css/dialtone-default-theme.css +5083 -1374
  2. package/dist/css/dialtone-default-theme.min.css +1 -1
  3. package/dist/css/dialtone-docs.json +1 -1
  4. package/dist/css/dialtone.css +1365 -133
  5. package/dist/css/dialtone.min.css +1 -1
  6. package/dist/css/tokens/tokens-base-dark.css +453 -138
  7. package/dist/css/tokens/tokens-base-deca-dark.css +397 -292
  8. package/dist/css/tokens/tokens-base-deca-light.css +356 -251
  9. package/dist/css/tokens/tokens-base-light.css +419 -104
  10. package/dist/css/tokens/tokens-debug-base.css +317 -2
  11. package/dist/css/tokens/tokens-debug-dp.css +1000 -664
  12. package/dist/css/tokens/tokens-deca-dark.css +1227 -926
  13. package/dist/css/tokens/tokens-deca-light.css +1195 -894
  14. package/dist/css/tokens/tokens-dp-dark.css +1246 -910
  15. package/dist/css/tokens/tokens-dp-light.css +1307 -971
  16. package/dist/css/tokens/tokens-expressive-dark.css +1247 -911
  17. package/dist/css/tokens/tokens-expressive-light.css +1304 -968
  18. package/dist/css/tokens/tokens-expressive-sm-dark.css +1247 -911
  19. package/dist/css/tokens/tokens-expressive-sm-light.css +1304 -968
  20. package/dist/css/tokens/tokens-tmo-dark.css +1232 -896
  21. package/dist/css/tokens/tokens-tmo-light.css +1259 -923
  22. package/dist/css/tokens-docs.json +1 -1
  23. package/dist/tokens/css/tokens-base-dark.css +453 -138
  24. package/dist/tokens/css/tokens-base-deca-dark.css +397 -292
  25. package/dist/tokens/css/tokens-base-deca-light.css +356 -251
  26. package/dist/tokens/css/tokens-base-light.css +419 -104
  27. package/dist/tokens/css/tokens-debug-base.css +317 -2
  28. package/dist/tokens/css/tokens-debug-dp.css +1000 -664
  29. package/dist/tokens/css/tokens-deca-dark.css +1227 -926
  30. package/dist/tokens/css/tokens-deca-light.css +1195 -894
  31. package/dist/tokens/css/tokens-dp-dark.css +1246 -910
  32. package/dist/tokens/css/tokens-dp-light.css +1307 -971
  33. package/dist/tokens/css/tokens-expressive-dark.css +1247 -911
  34. package/dist/tokens/css/tokens-expressive-light.css +1304 -968
  35. package/dist/tokens/css/tokens-expressive-sm-dark.css +1247 -911
  36. package/dist/tokens/css/tokens-expressive-sm-light.css +1304 -968
  37. package/dist/tokens/css/tokens-tmo-dark.css +1232 -896
  38. package/dist/tokens/css/tokens-tmo-light.css +1259 -923
  39. package/dist/tokens/doc.json +101427 -78452
  40. package/dist/tokens/less/tokens-base-dark.less +85 -40
  41. package/dist/tokens/less/tokens-base-deca-dark.less +82 -67
  42. package/dist/tokens/less/tokens-base-deca-light.less +70 -55
  43. package/dist/tokens/less/tokens-base-light.less +75 -30
  44. package/dist/tokens/less/tokens-deca-dark.less +194 -151
  45. package/dist/tokens/less/tokens-deca-light.less +161 -118
  46. package/dist/tokens/less/tokens-dp-dark.less +232 -184
  47. package/dist/tokens/less/tokens-dp-light.less +231 -183
  48. package/dist/tokens/less/tokens-expressive-dark.less +226 -178
  49. package/dist/tokens/less/tokens-expressive-light.less +225 -177
  50. package/dist/tokens/less/tokens-expressive-sm-dark.less +226 -178
  51. package/dist/tokens/less/tokens-expressive-sm-light.less +225 -177
  52. package/dist/tokens/less/tokens-tmo-dark.less +230 -182
  53. package/dist/tokens/less/tokens-tmo-light.less +214 -166
  54. package/dist/tokens/themes/chunks/tokens-base-dark-BOzMety-.js +4 -0
  55. package/dist/tokens/themes/chunks/tokens-base-dark-DQw_GZ7j.js +1 -0
  56. package/dist/tokens/themes/chunks/tokens-base-light-BHyHG_ZV.js +4 -0
  57. package/dist/tokens/themes/chunks/tokens-base-light-DMUiSUFR.js +1 -0
  58. package/dist/tokens/themes/debug.cjs +1 -1
  59. package/dist/tokens/themes/debug.js +1 -1
  60. package/dist/tokens/themes/dp-dark.cjs +1 -1
  61. package/dist/tokens/themes/dp-dark.js +2 -2
  62. package/dist/tokens/themes/dp-deca-dark.cjs +1 -1
  63. package/dist/tokens/themes/dp-deca-dark.js +1 -1
  64. package/dist/tokens/themes/dp-deca-light.cjs +1 -1
  65. package/dist/tokens/themes/dp-deca-light.js +2 -2
  66. package/dist/tokens/themes/dp-light.cjs +1 -1
  67. package/dist/tokens/themes/dp-light.js +2 -2
  68. package/dist/tokens/themes/expressive-dark.cjs +1 -1
  69. package/dist/tokens/themes/expressive-dark.js +3 -3
  70. package/dist/tokens/themes/expressive-light.cjs +1 -1
  71. package/dist/tokens/themes/expressive-light.js +3 -3
  72. package/dist/tokens/themes/expressive-sm-dark.cjs +1 -1
  73. package/dist/tokens/themes/expressive-sm-dark.js +3 -3
  74. package/dist/tokens/themes/expressive-sm-light.cjs +1 -1
  75. package/dist/tokens/themes/expressive-sm-light.js +3 -3
  76. package/dist/tokens/themes/tmo-dark.cjs +1 -1
  77. package/dist/tokens/themes/tmo-dark.js +2 -2
  78. package/dist/tokens/themes/tmo-light.cjs +1 -1
  79. package/dist/tokens/themes/tmo-light.js +2 -2
  80. package/dist/tokens/tokens-base-dark.json +85 -40
  81. package/dist/tokens/tokens-base-deca-dark.json +80 -65
  82. package/dist/tokens/tokens-base-deca-light.json +68 -53
  83. package/dist/tokens/tokens-base-light.json +75 -30
  84. package/dist/tokens/tokens-deca-dark.json +190 -147
  85. package/dist/tokens/tokens-deca-light.json +151 -108
  86. package/dist/tokens/tokens-dp-dark.json +219 -171
  87. package/dist/tokens/tokens-dp-light.json +230 -182
  88. package/dist/tokens/tokens-expressive-dark.json +213 -165
  89. package/dist/tokens/tokens-expressive-light.json +224 -176
  90. package/dist/tokens/tokens-expressive-sm-dark.json +213 -165
  91. package/dist/tokens/tokens-expressive-sm-light.json +224 -176
  92. package/dist/tokens/tokens-tmo-dark.json +217 -169
  93. package/dist/tokens/tokens-tmo-light.json +207 -159
  94. package/package.json +1 -1
  95. package/dist/tokens/themes/chunks/tokens-base-dark-BnTEKGxK.js +0 -4
  96. package/dist/tokens/themes/chunks/tokens-base-dark-Ch4dTh7V.js +0 -1
  97. package/dist/tokens/themes/chunks/tokens-base-light-BLxKOiup.js +0 -4
  98. package/dist/tokens/themes/chunks/tokens-base-light-DWLxg2cD.js +0 -1
@@ -9,118 +9,161 @@
9
9
  @dt-font-size-600: 105px;
10
10
  @dt-size-border-focus: 0.3rem;
11
11
  @dt-color-foreground-primary: #E6E6E6; // Default text color throughout the UI.
12
- @dt-color-foreground-secondary: #C2C2C2; // Example uses include introduction paragraphs, labels, and descriptions paired with form elements.
13
- @dt-color-foreground-tertiary: #AAAAAA; // Used to imply visual hierarchy relative to primary and secondary text colors, e.g. headlines and labels.
12
+ @dt-color-foreground-secondary: #c7c7c7; // Example uses include introduction paragraphs, labels, and descriptions paired with form elements.
13
+ @dt-color-foreground-tertiary: #B0B0B0; // Used to imply visual hierarchy relative to primary and secondary text colors, e.g. headlines and labels.
14
14
  @dt-color-foreground-muted: hsl(0 0% 83.1% / 0.6);
15
- @dt-color-foreground-placeholder: #AAAAAA;
16
- @dt-color-foreground-disabled: #AAAAAA;
17
- @dt-color-foreground-critical: #FF8585;
18
- @dt-color-foreground-critical-strong: hsl(0 100% 82.1%);
19
- @dt-color-foreground-success: #B0FFA3; // Indicates a positive state.
20
- @dt-color-foreground-success-strong: hsl(112 100% 88.3%);
21
- @dt-color-foreground-warning: #FFDB80;
15
+ @dt-color-foreground-placeholder: #B0B0B0;
16
+ @dt-color-foreground-disabled: #B0B0B0;
17
+ @dt-color-foreground-critical: #FF716F;
18
+ @dt-color-foreground-critical-strong: #FFABA4;
19
+ @dt-color-foreground-success: #AEFB3C;
20
+ @dt-color-foreground-success-strong: #DBFFA9;
21
+ @dt-color-foreground-warning: #FFBD48;
22
22
  @dt-color-foreground-primary-inverted: #000000;
23
- @dt-color-foreground-secondary-inverted: #3A3A3A;
23
+ @dt-color-foreground-secondary-inverted: #3d3d3d;
24
24
  @dt-color-foreground-tertiary-inverted: #555555;
25
- @dt-color-foreground-muted-inverted: hsl(0 0% 14.9% / 0.6); // Muted text color that sits on high-contrast surfaces or backgrounds.
26
- @dt-color-foreground-placeholder-inverted: #808080; // Placeholder text color that sits on high-contrast surfaces or backgrounds.
27
- @dt-color-foreground-disabled-inverted: #808080; // Disabled text color that sits on high-contrast surfaces or backgrounds.
28
- @dt-color-foreground-critical-inverted: #EC0E0E;
29
- @dt-color-foreground-critical-strong-inverted: #B70B0B;
30
- @dt-color-foreground-success-inverted: #1AA340; // Success text that sits on high-contrast surfaces or backgrounds
31
- @dt-color-foreground-success-strong-inverted: #124620;
32
- @dt-color-foreground-warning-inverted: #815008; // Warning text that sits on high-contrast surfaces or backgrounds
33
- @dt-color-link-primary: hsl(261 100% 78.2%);
34
- @dt-color-link-critical: #FF8585;
35
- @dt-color-link-success: #B0FFA3; // positive
36
- @dt-color-link-warning: #FFDB80;
37
- @dt-color-link-muted: #C2C2C2;
38
- @dt-color-link-disabled: #AAAAAA;
39
- @dt-color-link-primary-inverted: #7C52FF;
40
- @dt-color-link-critical-inverted: #EC0E0E;
41
- @dt-color-link-success-inverted: #1AA340;
42
- @dt-color-link-warning-inverted: #815008;
43
- @dt-color-link-muted-inverted: #3A3A3A;
44
- @dt-color-link-disabled-inverted: #808080;
25
+ @dt-color-foreground-muted-inverted: hsl(0 0% 9.02% / 0.65); // Muted text color that sits on high-contrast surfaces or backgrounds.
26
+ @dt-color-foreground-placeholder-inverted: #555555; // Placeholder text color that sits on high-contrast surfaces or backgrounds.
27
+ @dt-color-foreground-disabled-inverted: #555555; // Disabled text color that sits on high-contrast surfaces or backgrounds.
28
+ @dt-color-foreground-critical-inverted: #FF1356;
29
+ @dt-color-foreground-critical-strong-inverted: #640823; // Critical strong text that sits on high-contrast surfaces or backgrounds
30
+ @dt-color-foreground-success-inverted: #008E52;
31
+ @dt-color-foreground-success-strong-inverted: #004F2E;
32
+ @dt-color-foreground-warning-inverted: #815008;
33
+ @dt-color-link-primary: #C2A3FF;
45
34
  @dt-color-link-primary-hover: #DAC7FF;
46
- @dt-color-link-critical-hover: #FFE5E6;
47
- @dt-color-link-success-hover: #EDF9EB;
48
- @dt-color-link-warning-hover: #FFF4CC;
35
+ @dt-color-link-critical: #FF716F;
36
+ @dt-color-link-critical-hover: #FFABA4;
37
+ @dt-color-link-success: #AEFB3C; // positive
38
+ @dt-color-link-success-hover: #DBFFA9;
39
+ @dt-color-link-warning: #FFBD48;
40
+ @dt-color-link-warning-hover: #FFE89C;
41
+ @dt-color-link-muted: #c7c7c7;
49
42
  @dt-color-link-muted-hover: #E6E6E6;
50
- @dt-color-link-disabled-hover: #AAAAAA;
51
- @dt-color-link-primary-inverted-hover: #3A1D95;
52
- @dt-color-link-critical-inverted-hover: #B70B0B;
53
- @dt-color-link-success-inverted-hover: #124620;
54
- @dt-color-link-warning-inverted-hover: #262626;
55
- @dt-color-link-muted-inverted-hover: #000000;
56
- @dt-color-link-disabled-inverted-hover: #808080;
57
- @dt-color-surface-secondary-opaque: hsl(0 0% 90.2% / 0.06);
58
- @dt-color-surface-moderate-opaque: hsl(0 0% 90.2% / 0.15);
59
- @dt-color-surface-bold-opaque: hsl(0 0% 90.2% / 0.27);
60
- @dt-color-surface-strong-opaque: hsl(0 0% 90.2% / 0.65);
61
- @dt-color-surface-contrast-opaque: hsl(0 0% 90.2% / 0.96);
62
- @dt-color-surface-backdrop: hsl(0 0% 0% / 0.7); // Background color for a modal-like backdrop.
63
- @dt-color-surface-critical-opaque: hsl(0 88.7% 38% / 0.32);
64
- @dt-color-surface-critical-subtle-opaque: hsl(0 89.6% 9.41% / 0.5);
65
- @dt-color-surface-warning-opaque: hsl(35.9 66% 49.6% / 0.48);
66
- @dt-color-surface-warning-subtle-opaque: hsl(35.7 88.3% 13.4% / 0.5);
67
- @dt-color-surface-success-opaque: hsl(137 72.5% 37.1% / 0.26);
68
- @dt-color-surface-success-subtle-opaque: hsl(136 59.1% 8.63% / 0.5);
69
- @dt-color-surface-info-opaque: hsl(212 79.2% 43.3% / 0.29);
70
- @dt-color-surface-info-subtle-opaque: hsl(213 98.2% 12.9% / 0.5);
71
- @dt-color-surface-primary: hsl(0 0% 12%);
72
- @dt-color-surface-secondary: #262626;
73
- @dt-color-surface-moderate: #3A3A3A;
43
+ @dt-color-link-disabled: #B0B0B0;
44
+ @dt-color-link-disabled-hover: #B0B0B0;
45
+ @dt-color-link-primary-inverted: #7C52FF;
46
+ @dt-color-link-primary-inverted-hover: #5023DD;
47
+ @dt-color-link-critical-inverted: #FF1356;
48
+ @dt-color-link-critical-inverted-hover: #640823;
49
+ @dt-color-link-success-inverted: #008E52;
50
+ @dt-color-link-success-inverted-hover: #004F2E;
51
+ @dt-color-link-warning-inverted: #815008;
52
+ @dt-color-link-warning-inverted-hover: #533204;
53
+ @dt-color-link-muted-inverted: #3d3d3d;
54
+ @dt-color-link-muted-inverted-hover: #171717;
55
+ @dt-color-link-disabled-inverted: #555555;
56
+ @dt-color-link-disabled-inverted-hover: #555555;
57
+ @dt-color-surface-primary: #171717;
58
+ @dt-color-surface-secondary: #1f1f1f;
59
+ @dt-color-surface-moderate: #3d3d3d;
74
60
  @dt-color-surface-bold: #555555;
75
- @dt-color-surface-strong: #AAAAAA; // Use sparingly to draw the eye to a relatively important region.
76
- @dt-color-surface-contrast: #E6E6E6;
77
- @dt-color-surface-critical: #5B0505; // Background surface color containing error, danger, or otherwise critical messaging or elements.
78
- @dt-color-surface-critical-subtle: hsl(0 89.6% 9.41%);
79
- @dt-color-surface-critical-strong: #FF8585; // A contrasting critical surface, most likely paired with inverted foreground colors.
80
- @dt-color-surface-warning: #815008; // Background surface color highlighting messaging or elements that may require user's attention.
81
- @dt-color-surface-warning-subtle: hsl(35.7 88.3% 13.4%);
82
- @dt-color-surface-warning-strong: #D28F2B; // A contrasting warning surface, most likely paired with inverted foreground colors.
83
- @dt-color-surface-success: #124620; // Background surface color containing messaging or elements expressing a positive or successful state.
84
- @dt-color-surface-success-subtle: hsl(136 59.1% 8.63%);
85
- @dt-color-surface-success-strong: #B0FFA3; // A contrasting positive state surface, most likely paired with inverted foreground colors.
86
- @dt-color-surface-info: #01326D; // Background surface color containing messaging or elements communicated as generally informational.
87
- @dt-color-surface-info-subtle: hsl(213 98.2% 12.9%);
88
- @dt-color-surface-info-strong: #99C8FF; // A contrasting informational surface, most likely paired with inverted foreground colors.
61
+ @dt-color-surface-strong: #B0B0B0;
62
+ @dt-color-surface-contrast: #ffffff;
63
+ @dt-color-surface-critical: #380010; // Background surface color containing error, danger, or otherwise critical messaging or elements.
64
+ @dt-color-surface-warning: #2C1B02; // Background surface color highlighting messaging or elements that may require user's attention.
65
+ @dt-color-surface-success: #012717; // Background surface color containing messaging or elements expressing a positive or successful state.
66
+ @dt-color-surface-info: #001429; // Background surface color containing messaging or elements communicated as generally informational.
67
+ @dt-color-surface-brand: #1D0155; // Background surface color containing messaging or elements communicated as generally informational.
68
+ @dt-color-surface-critical-subtle: hsl(343 100% 5.49%);
69
+ @dt-color-surface-warning-subtle: hsl(35.7 91.3% 4.51%);
70
+ @dt-color-surface-success-subtle: hsl(155 95% 3.92%);
71
+ @dt-color-surface-info-subtle: hsl(211 100% 4.82%);
72
+ @dt-color-surface-brand-subtle: #0E002A; // A softer version of the default informational surface.
73
+ @dt-color-surface-critical-strong: #FF716F;
74
+ @dt-color-surface-warning-strong: #FFDB80;
75
+ @dt-color-surface-success-strong: #AEFB3C;
76
+ @dt-color-surface-info-strong: #4AA9EA;
77
+ @dt-color-surface-brand-strong: #AB7EFF;
78
+ @dt-color-surface-primary-opaque: hsl(0 0% 9.02% / 0.9);
79
+ @dt-color-surface-secondary-opaque: hsl(0 0% 90.2% / 0.03);
80
+ @dt-color-surface-moderate-opaque: hsl(0 0% 90.2% / 0.18);
81
+ @dt-color-surface-bold-opaque: hsl(0 0% 90.2% / 0.3);
82
+ @dt-color-surface-strong-opaque: hsl(0 0% 90.2% / 0.74);
83
+ @dt-color-surface-contrast-opaque: hsl(0 0% 100% / 0.97);
84
+ @dt-color-surface-critical-opaque: hsl(343 72.9% 33.3% / 0.2);
85
+ @dt-color-surface-warning-opaque: hsl(34.9 90.8% 17.1% / 0.35);
86
+ @dt-color-surface-success-opaque: hsl(155 100% 15.5% / 0.28);
87
+ @dt-color-surface-info-opaque: hsl(211 100% 8.04% / 0.4);
88
+ @dt-color-surface-brand-opaque: hsl(260 97.7% 16.9% / 0.7);
89
+ @dt-color-surface-critical-subtle-opaque: hsl(344 93.1% 5.69% / 0.6);
90
+ @dt-color-surface-warning-subtle-opaque: hsl(34.8 93.9% 6.47% / 0.7);
91
+ @dt-color-surface-success-subtle-opaque: hsl(157 100% 4.12% / 0.6);
92
+ @dt-color-surface-info-subtle-opaque: hsl(211 91.3% 4.51% / 0.7);
93
+ @dt-color-surface-brand-subtle-opaque: hsl(260 100% 8.24% / 0.65);
94
+ @dt-color-surface-primary-inverted: #ffffff; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
95
+ @dt-color-surface-secondary-inverted: #F9F9F9;
96
+ @dt-color-surface-moderate-inverted: #E6E6E6;
97
+ @dt-color-surface-bold-inverted: #D4D4D4;
98
+ @dt-color-surface-strong-inverted: #555555; // Use sparingly to draw the eye to a relatively important region.
99
+ @dt-color-surface-contrast-inverted: #171717; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
100
+ @dt-color-surface-critical-inverted: #FFE5E6; // Background surface color containing error, danger, or otherwise critical messaging or elements.
101
+ @dt-color-surface-warning-inverted: #FFF4CC; // Background surface color highlighting messaging or elements that may require user's attention.
102
+ @dt-color-surface-success-inverted: #EDF9EB; // Background surface color containing messaging or elements expressing a positive or successful state.
103
+ @dt-color-surface-info-inverted: #EAF2FA; // Background surface color containing messaging or elements communicated as generally informational.
104
+ @dt-color-surface-brand-inverted: #F5F0FF; // Background surface color containing messaging or elements communicated as generally informational.
105
+ @dt-color-surface-critical-subtle-inverted: #FFF2F3; // A softer version of the Critical surface.
106
+ @dt-color-surface-warning-subtle-inverted: #fffae5; // A softer version of the default warning surface.
107
+ @dt-color-surface-success-subtle-inverted: #f6fcf5; // A softer version of the default success surface.
108
+ @dt-color-surface-info-subtle-inverted: #f5f9fd; // A softer version of the default informational surface.
109
+ @dt-color-surface-brand-subtle-inverted: #f9f6ff; // A softer version of the default informational surface.
110
+ @dt-color-surface-critical-strong-inverted: #D90A45;
111
+ @dt-color-surface-warning-strong-inverted: #FFBD48;
112
+ @dt-color-surface-success-strong-inverted: #31B237; // A contrasting positive state surface, most likely paired with inverted foreground colors.
113
+ @dt-color-surface-info-strong-inverted: #1768C6;
114
+ @dt-color-surface-brand-strong-inverted: #7C52FF;
115
+ @dt-color-surface-primary-opaque-inverted: hsl(0 0% 100% / 0.85); // Secondary surface as opaque background color.
116
+ @dt-color-surface-secondary-opaque-inverted: hsl(0 0% 0% / 0.04);
117
+ @dt-color-surface-moderate-opaque-inverted: hsl(0 0% 0% / 0.11);
118
+ @dt-color-surface-bold-opaque-inverted: hsl(0 0% 0% / 0.18);
119
+ @dt-color-surface-strong-opaque-inverted: hsl(0 0% 0% / 0.67); // Strong surface as opaque background color.
120
+ @dt-color-surface-contrast-opaque-inverted: hsl(0 0% 0% / 0.97); // Contrast surface as opaque background color.
121
+ @dt-color-surface-critical-opaque-inverted: hsl(4.62 100% 82.2% / 0.5);
122
+ @dt-color-surface-warning-opaque-inverted: hsl(46.1 100% 80.6% / 0.5);
123
+ @dt-color-surface-success-opaque-inverted: hsl(85.1 100% 83.1% / 0.3); // Success surface as opaque background color.
124
+ @dt-color-surface-info-opaque-inverted: hsl(210 61.5% 94.9% / 0.6); // Info surface as opaque background color.
125
+ @dt-color-surface-brand-opaque-inverted: hsl(260 100% 97.1% / 0.8); // Info surface as opaque background color.
126
+ @dt-color-surface-critical-subtle-opaque-inverted: hsl(358 100% 94.9% / 0.8);
127
+ @dt-color-surface-warning-subtle-opaque-inverted: hsl(48.5 100% 94.9% / 0.7); // Warning subtle surface as opaque background color
128
+ @dt-color-surface-success-subtle-opaque-inverted: hsl(111 53.8% 97.5% / 0.66); // Success subtle surface as opaque background color.
129
+ @dt-color-surface-info-subtle-opaque-inverted: hsl(210 66.7% 97.6% / 0.66); // Info surface as opaque background color.
130
+ @dt-color-surface-brand-subtle-opaque-inverted: hsl(260 100% 98.2% / 0.66); // Info surface as opaque background color.
131
+ @dt-color-surface-backdrop: hsl(0 0% 0% / 0.65); // Background color for a modal-like backdrop.
89
132
  @dt-color-border-subtle: hsl(0 0% 100% / 0.14);
90
133
  @dt-color-border-default: hsl(0 0% 100% / 0.22);
91
134
  @dt-color-border-moderate: hsl(0 0% 100% / 0.36);
92
135
  @dt-color-border-bold: hsl(0 0% 100% / 0.5);
136
+ @dt-color-border-critical: #FF716F;
137
+ @dt-color-border-success: #D1FF76;
138
+ @dt-color-border-warning: #FFDB80;
139
+ @dt-color-border-brand: #C2A3FF;
140
+ @dt-color-border-critical-subtle: #93173A;
141
+ @dt-color-border-success-subtle: #52C926;
142
+ @dt-color-border-warning-subtle: #FF9E0E;
143
+ @dt-color-border-brand-subtle: #7C52FF;
144
+ @dt-color-border-critical-strong: #FFABA4;
145
+ @dt-color-border-success-strong: #AEFB3C;
146
+ @dt-color-border-warning-strong: #FFE89C;
147
+ @dt-color-border-brand-strong: #DAC7FF;
93
148
  @dt-color-border-subtle-inverted: hsl(0 0% 0% / 0.1);
94
149
  @dt-color-border-default-inverted: hsl(0 0% 0% / 0.18);
95
150
  @dt-color-border-moderate-inverted: hsl(0 0% 0% / 0.34);
96
151
  @dt-color-border-bold-inverted: hsl(0 0% 0% / 0.5);
97
- @dt-color-border-focus: #51A0FE;
98
- @dt-color-border-critical: #FF8585;
99
- @dt-color-border-success: #B0FFA3;
100
- @dt-color-border-warning: #FFDB80;
101
- @dt-color-border-brand: #7C52FF;
102
- @dt-color-border-ai: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
103
- @dt-color-border-accent: #F9008E;
104
- @dt-color-border-critical-subtle: #B70B0B;
105
- @dt-color-border-critical-strong: #FFE5E6;
106
- @dt-color-border-success-subtle: #1AA340;
107
- @dt-color-border-success-strong: #EDF9EB;
108
- @dt-color-border-warning-subtle: #D28F2B;
109
- @dt-color-border-warning-strong: #FFF4CC;
110
- @dt-color-border-brand-subtle: #3A1D95;
111
- @dt-color-border-brand-strong: #DAC7FF;
112
- @dt-color-border-critical-inverted: #EC0E0E;
113
- @dt-color-border-success-inverted: #1AA340;
114
- @dt-color-border-warning-inverted: #D28F2B;
152
+ @dt-color-border-critical-inverted: #FF1356;
153
+ @dt-color-border-success-inverted: #31B237;
154
+ @dt-color-border-warning-inverted: #FF9E0E;
115
155
  @dt-color-border-brand-inverted: #7C52FF;
116
- @dt-color-border-critical-subtle-inverted: #FF8585;
117
- @dt-color-border-critical-strong-inverted: #B70B0B;
118
- @dt-color-border-success-subtle-inverted: #B0FFA3;
119
- @dt-color-border-success-strong-inverted: #124620;
156
+ @dt-color-border-critical-subtle-inverted: #FF716F;
157
+ @dt-color-border-success-subtle-inverted: #D1FF76;
120
158
  @dt-color-border-warning-subtle-inverted: #FFDB80;
121
- @dt-color-border-warning-strong-inverted: #815008;
122
- @dt-color-border-brand-subtle-inverted: #DAC7FF;
123
- @dt-color-border-brand-strong-inverted: #3A1D95;
159
+ @dt-color-border-brand-subtle-inverted: #C2A3FF;
160
+ @dt-color-border-critical-strong-inverted: #93173A;
161
+ @dt-color-border-success-strong-inverted: #004F2E;
162
+ @dt-color-border-warning-strong-inverted: #D57F00;
163
+ @dt-color-border-brand-strong-inverted: #5023DD;
164
+ @dt-color-border-focus: #1768C6;
165
+ @dt-color-border-ai: linear-gradient(135deg, #FF1BA4 10%, #7C52FF 90%);
166
+ @dt-color-border-accent: #FF1BA4;
124
167
  @dt-typography-body-md-font-family: 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"; // Base default medium text style for main content.
125
168
  @dt-typography-body-md-font-weight: 400; // Base default medium text style for main content.
126
169
  @dt-typography-body-md-line-height: 1.6; // Base default medium text style for main content.
@@ -319,78 +362,78 @@
319
362
  @dt-inputs-font-weight-lg: 400; // Font weight for large inputs (e.g. input and textarea)
320
363
  @dt-inputs-font-weight-xl: 400; // Font weight for extra large inputs (e.g. input and textarea)
321
364
  @dt-inputs-color-foreground-default: #E6E6E6;
322
- @dt-inputs-color-foreground-placeholder: #AAAAAA;
323
- @dt-inputs-color-foreground-disabled: #AAAAAA;
365
+ @dt-inputs-color-foreground-placeholder: #B0B0B0;
366
+ @dt-inputs-color-foreground-disabled: #B0B0B0;
324
367
  @dt-inputs-color-border-default: hsl(0 0% 100% / 0.22);
325
- @dt-inputs-color-border-focus: #51A0FE;
326
- @dt-inputs-color-border-critical: #FF8585;
327
- @dt-inputs-color-border-success: #B0FFA3;
368
+ @dt-inputs-color-border-focus: #1768C6;
369
+ @dt-inputs-color-border-critical: #FF716F;
370
+ @dt-inputs-color-border-success: #D1FF76;
328
371
  @dt-inputs-color-border-warning: #FFDB80;
329
372
  @dt-inputs-color-border-disabled: transparent;
330
- @dt-inputs-color-background-default: hsl(0 0% 90.2% / 0.06);
331
- @dt-inputs-color-background-focus: hsl(0 0% 90.2% / 0.03);
332
- @dt-inputs-color-background-disabled: hsl(0 0% 90.2% / 0.15);
333
- @dt-action-color-foreground-base-default: #AB7EFF;
334
- @dt-action-color-foreground-base-hover: lch(69.4 56.1 303);
335
- @dt-action-color-foreground-base-active: lch(69.4 56.1 303);
336
- @dt-action-color-foreground-base-primary-default: #ffffff;
337
- @dt-action-color-foreground-critical-default: #FF8585;
338
- @dt-action-color-foreground-critical-hover: lch(77.4 39.2 25.4);
339
- @dt-action-color-foreground-critical-active: lch(77.4 39.2 25.4);
340
- @dt-action-color-foreground-critical-primary-default: #ffffff;
373
+ @dt-inputs-color-background-default: hsl(0 0% 90.2% / 0.03);
374
+ @dt-inputs-color-background-focus: #171717;
375
+ @dt-inputs-color-background-disabled: hsl(0 0% 90.2% / 0.18);
376
+ @dt-action-color-foreground-base-default: #C2A3FF;
377
+ @dt-action-color-foreground-base-hover: #DAC7FF;
378
+ @dt-action-color-foreground-base-active: #DAC7FF;
379
+ @dt-action-color-foreground-base-primary-default: #000000;
380
+ @dt-action-color-foreground-critical-default: #FF716F;
381
+ @dt-action-color-foreground-critical-hover: #FFABA4;
382
+ @dt-action-color-foreground-critical-active: #FFABA4;
383
+ @dt-action-color-foreground-critical-primary-default: #000000;
341
384
  @dt-action-color-foreground-inverted-default: #000000;
342
385
  @dt-action-color-foreground-inverted-hover: #000000;
343
386
  @dt-action-color-foreground-inverted-active: #000000;
344
- @dt-action-color-foreground-inverted-primary-default: #AB7EFF;
387
+ @dt-action-color-foreground-inverted-primary-default: #C2A3FF;
345
388
  @dt-action-color-foreground-inverted-primary-hover: #DAC7FF;
346
389
  @dt-action-color-foreground-inverted-primary-active: #DAC7FF;
347
- @dt-action-color-foreground-muted-default: #C2C2C2;
348
- @dt-action-color-foreground-muted-hover: #C2C2C2;
349
- @dt-action-color-foreground-muted-active: #C2C2C2;
350
- @dt-action-color-foreground-disabled-default: #AAAAAA;
351
- @dt-action-color-foreground-positive-default: #B0FFA3;
352
- @dt-action-color-foreground-positive-hover: hsl(112 100% 67.2%);
353
- @dt-action-color-foreground-positive-active: hsl(112 100% 67.2%);
354
- @dt-action-color-foreground-positive-primary-default: #ffffff;
390
+ @dt-action-color-foreground-muted-default: #c7c7c7;
391
+ @dt-action-color-foreground-muted-hover: #E6E6E6;
392
+ @dt-action-color-foreground-muted-active: #E6E6E6;
393
+ @dt-action-color-foreground-disabled-default: #B0B0B0;
394
+ @dt-action-color-foreground-positive-default: #AEFB3C;
395
+ @dt-action-color-foreground-positive-hover: #DBFFA9;
396
+ @dt-action-color-foreground-positive-active: #DBFFA9;
397
+ @dt-action-color-foreground-positive-primary-default: #000000;
355
398
  @dt-action-color-background-base-default: transparent;
356
- @dt-action-color-background-base-hover: hsl(261 100% 74.7% / 0.1);
357
- @dt-action-color-background-base-active: hsl(261 100% 74.7% / 0.2);
358
- @dt-action-color-background-base-primary-default: #7C52FF;
359
- @dt-action-color-background-base-primary-hover: hsl(255 100% 63.4%);
360
- @dt-action-color-background-base-primary-active: hsl(255 100% 60.8%);
399
+ @dt-action-color-background-base-hover: hsl(258 100% 70.4% / 0.2);
400
+ @dt-action-color-background-base-active: hsl(258 100% 70.4% / 0.3);
401
+ @dt-action-color-background-base-primary-default: #AB7EFF;
402
+ @dt-action-color-background-base-primary-hover: #C2A3FF;
403
+ @dt-action-color-background-base-primary-active: #AB7EFF;
361
404
  @dt-action-color-background-critical-default: transparent;
362
- @dt-action-color-background-critical-hover: hsl(0 88.8% 49% / 0.2);
363
- @dt-action-color-background-critical-active: hsl(0 88.8% 49% / 0.3);
364
- @dt-action-color-background-critical-primary-default: #EC0E0E;
365
- @dt-action-color-background-critical-primary-hover: hsl(0 88.8% 45.1%);
366
- @dt-action-color-background-critical-primary-active: hsl(0 88.8% 43.1%);
405
+ @dt-action-color-background-critical-hover: hsl(343 72.9% 33.3% / 0.2);
406
+ @dt-action-color-background-critical-active: hsl(343 72.9% 50% / 0.2);
407
+ @dt-action-color-background-critical-primary-default: #FF716F;
408
+ @dt-action-color-background-critical-primary-hover: #FFABA4;
409
+ @dt-action-color-background-critical-primary-active: #FF716F;
367
410
  @dt-action-color-background-inverted-default: transparent;
368
- @dt-action-color-background-inverted-hover: hsl(0 0% 12% / 0.15);
369
- @dt-action-color-background-inverted-active: hsl(0 0% 12% / 0.3);
370
- @dt-action-color-background-inverted-primary-default: hsl(0 0% 12%);
371
- @dt-action-color-background-inverted-primary-hover: #10022C;
411
+ @dt-action-color-background-inverted-hover: #D4D4D4;
412
+ @dt-action-color-background-inverted-active: #c7c7c7;
413
+ @dt-action-color-background-inverted-primary-default: #171717;
414
+ @dt-action-color-background-inverted-primary-hover: #1D0155;
372
415
  @dt-action-color-background-inverted-primary-active: #3A1D95;
373
416
  @dt-action-color-background-muted-default: transparent;
374
- @dt-action-color-background-muted-hover: hsl(0 0% 83.1% / 0.1);
375
- @dt-action-color-background-muted-active: hsl(0 0% 83.1% / 0.16);
376
- @dt-action-color-background-disabled-default: #3A3A3A;
417
+ @dt-action-color-background-muted-hover: hsl(0 0% 90.2% / 0.18);
418
+ @dt-action-color-background-muted-active: hsl(0 0% 90.2% / 0.3);
419
+ @dt-action-color-background-disabled-default: hsl(0 0% 90.2% / 0.3);
377
420
  @dt-action-color-background-positive-default: transparent;
378
- @dt-action-color-background-positive-hover: hsl(136 59.1% 66.9%);
379
- @dt-action-color-background-positive-active: hsl(112 100% 82% / 0.08);
380
- @dt-action-color-background-positive-primary-default: #B0FFA3;
381
- @dt-action-color-background-positive-primary-hover: hsl(112 100% 73.8%);
382
- @dt-action-color-background-positive-primary-active: hsl(112 100% 68.8%);
383
- @dt-action-color-border-base-outlined-default: #AB7EFF;
384
- @dt-action-color-border-critical-outlined-default: #FF8585;
421
+ @dt-action-color-background-positive-hover: hsl(155 100% 15.5% / 0.28);
422
+ @dt-action-color-background-positive-active: hsl(155 100% 36.6% / 0.28);
423
+ @dt-action-color-background-positive-primary-default: #AEFB3C; // Postive, accepting, or success actions.
424
+ @dt-action-color-background-positive-primary-hover: #D1FF76;
425
+ @dt-action-color-background-positive-primary-active: #AEFB3C;
426
+ @dt-action-color-border-base-outlined-default: #C2A3FF;
427
+ @dt-action-color-border-critical-outlined-default: #FF716F;
385
428
  @dt-action-color-border-inverted-outlined-default: hsl(0 0% 0% / 0.18);
386
429
  @dt-action-color-border-muted-outlined-default: hsl(0 0% 100% / 0.22);
387
430
  @dt-theme-color-base: #E6E6E6;
388
- @dt-theme-topbar-color-foreground: hsl(0 0% 90.2% / 0.75);
389
- @dt-theme-topbar-color-background: #262626;
431
+ @dt-theme-topbar-color-foreground: hsl(0 0% 90.2% / 0.8);
432
+ @dt-theme-topbar-color-background: #1f1f1f;
390
433
  @dt-theme-topbar-field-color-foreground: hsl(0 0% 90.2% / 0.5);
391
434
  @dt-theme-topbar-field-color-foreground-hover: hsl(0 0% 90.2% / 0.75);
392
435
  @dt-theme-topbar-field-color-background: hsl(0 0% 90.2% / 0.05);
393
- @dt-theme-topbar-field-color-background-hover: hsl(0 0% 10.1%);
436
+ @dt-theme-topbar-field-color-background-hover: hsl(0 0% 8.27%);
394
437
  @dt-theme-topbar-field-color-border: hsl(0 0% 90.2% / 0);
395
438
  @dt-theme-topbar-field-color-border-hover: hsl(0 0% 90.2% / 0.1);
396
439
  @dt-theme-topbar-field-color-border-active: hsl(0 0% 90.2% / 0.2);
@@ -399,31 +442,31 @@
399
442
  @dt-theme-topbar-button-color-background: hsl(0 0% 90.2% / 0);
400
443
  @dt-theme-topbar-button-color-background-hover: hsl(0 0% 90.2% / 0.15);
401
444
  @dt-theme-topbar-button-color-background-active: hsl(0 0% 90.2% / 0.1);
402
- @dt-theme-topbar-profile-color-foreground: hsl(0 0% 90.2% / 0.75);
445
+ @dt-theme-topbar-profile-color-foreground: hsl(0 0% 90.2% / 0.8);
403
446
  @dt-theme-topbar-profile-color-foreground-inverted: hsl(0 0% 0% / 0.75);
404
447
  @dt-theme-topbar-profile-color-background: hsl(0 0% 90.2% / 0.05);
405
448
  @dt-theme-topbar-profile-color-background-inverted: hsl(0 0% 90.2% / 0.75);
406
449
  @dt-theme-topbar-profile-color-background-hover: hsl(0 0% 90.2% / 0.1);
407
450
  @dt-theme-topbar-profile-color-background-active: hsl(0 0% 90.2% / 0.14);
408
- @dt-theme-sidebar-color-foreground: #C2C2C2;
451
+ @dt-theme-sidebar-color-foreground: #c7c7c7;
409
452
  @dt-theme-sidebar-color-foreground-unread: #E6E6E6;
410
- @dt-theme-sidebar-color-background: #262626;
411
- @dt-theme-sidebar-icon-color-foreground: #C2C2C2;
412
- @dt-theme-sidebar-status-color-foreground: #AAAAAA;
453
+ @dt-theme-sidebar-color-background: #1f1f1f;
454
+ @dt-theme-sidebar-icon-color-foreground: #c7c7c7;
455
+ @dt-theme-sidebar-status-color-foreground: #B0B0B0;
413
456
  @dt-theme-sidebar-row-color-background: hsl(0 0% 90.2% / 0);
414
- @dt-theme-sidebar-row-color-background-hover: hsl(0 0% 90.2% / 0.18);
415
- @dt-theme-sidebar-row-color-background-active: hsl(0 0% 90.2% / 0.24);
457
+ @dt-theme-sidebar-row-color-background-hover: hsl(0 0% 90.2% / 0.1);
458
+ @dt-theme-sidebar-row-color-background-active: hsl(0 0% 90.2% / 0.15);
416
459
  @dt-theme-sidebar-selected-row-color-foreground: #E6E6E6;
417
- @dt-theme-sidebar-selected-row-color-background: hsl(0 0% 90.2% / 0.2);
418
- @dt-theme-sidebar-section-color-foreground: #AAAAAA;
419
- @dt-theme-presence-color-background-available: #B0FFA3;
420
- @dt-theme-presence-color-background-busy-unavailable: #FF8585;
421
- @dt-theme-presence-color-background-busy: #F6AB3C;
460
+ @dt-theme-sidebar-selected-row-color-background: hsl(0 0% 90.2% / 0.12);
461
+ @dt-theme-sidebar-section-color-foreground: #B0B0B0;
462
+ @dt-theme-presence-color-background-available: #84EE0B;
463
+ @dt-theme-presence-color-background-busy-unavailable: #FF415B;
464
+ @dt-theme-presence-color-background-busy: #FFBD48;
422
465
  @dt-theme-presence-color-background-offline: #ffffff;
423
- @dt-theme-mention-color-foreground: #ffffff;
466
+ @dt-theme-mention-color-foreground: #000000;
424
467
  @dt-theme-mention-color-foreground-strong: #000000;
425
- @dt-theme-mention-color-background: #7C52FF;
426
- @dt-theme-mention-color-background-strong: #DAC7FF;
468
+ @dt-theme-mention-color-background: #AB7EFF;
469
+ @dt-theme-mention-color-background-strong: #F5F0FF;
427
470
  @dt-avatar-color-foreground: #000000;
428
471
  @dt-avatar-color-background-100: #1aa340;
429
472
  @dt-avatar-color-background-200: #aaff83;
@@ -444,25 +487,28 @@
444
487
  @dt-avatar-color-background-1700: #ffd646;
445
488
  @dt-avatar-color-background-1800: #f1dab7;
446
489
  @dt-avatar-color-background-000: #e0e0e0;
447
- @dt-badge-color-background-default: hsl(0 0% 90.2% / 0.15);
448
- @dt-badge-color-background-info: #01326D;
449
- @dt-badge-color-background-success: #124620;
450
- @dt-badge-color-background-warning: #815008;
451
- @dt-badge-color-background-critical: #5B0505;
452
- @dt-badge-color-background-bulletin: #7C52FF;
453
- @dt-badge-color-background-bulletin-subtle: hsl(255 100% 66.1% / 0.1);
454
- @dt-badge-color-background-ai: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
455
- @dt-badge-color-foreground-default: #E6E6E6;
456
- @dt-badge-color-foreground-bulletin: #ffffff;
457
- @dt-badge-color-foreground-bulletin-subtle: hsl(255 100% 26.4%);
490
+ @dt-badge-color-background-default: hsl(0 0% 90.2% / 0.18);
491
+ @dt-badge-color-background-info: #003165;
492
+ @dt-badge-color-background-success: #004F2E;
493
+ @dt-badge-color-background-warning: #533204;
494
+ @dt-badge-color-background-critical: #640823;
495
+ @dt-badge-color-background-bulletin: #AB7EFF;
496
+ @dt-badge-color-background-bulletin-subtle: #3A1D95;
497
+ @dt-badge-color-background-ai: linear-gradient(135deg, #FF1BA4 10%, #7C52FF 90%);
498
+ @dt-badge-color-foreground-default: #ffffff;
499
+ @dt-badge-color-foreground-bulletin: #000000;
500
+ @dt-badge-color-foreground-bulletin-subtle: #DAC7FF;
501
+ @dt-badge-color-foreground-ai: #ffffff;
458
502
  @dt-badge-color-border-default: hsl(0 0% 100% / 0.14);
459
503
  @dt-badge-color-border-bulletin-subtle: hsl(255 100% 66.1% / 0.5);
460
504
  @dt-checkbox-size-width: 1.6rem;
461
505
  @dt-checkbox-size-height: 1.6rem;
462
506
  @dt-checkbox-size-radius: 0.4rem;
463
507
  @dt-checkbox-color-border-unchecked: hsl(0 0% 100% / 0.36);
464
- @dt-checkbox-color-border-checked: #7C52FF;
465
- @dt-checkbox-color-background-checked: #7C52FF;
508
+ @dt-checkbox-color-border-checked: #C2A3FF;
509
+ @dt-checkbox-color-background-checked: #AB7EFF;
510
+ @dt-checkbox-color-foreground-default: transparent;
511
+ @dt-checkbox-color-foreground-checked: #000000;
466
512
  @dt-icon-size-100: 12px;
467
513
  @dt-icon-size-200: 14px;
468
514
  @dt-icon-size-300: 18px;
@@ -483,5 +529,7 @@
483
529
  @dt-radio-size-height: 1.6rem;
484
530
  @dt-radio-size-radius: 50%;
485
531
  @dt-radio-color-border-unchecked: hsl(0 0% 100% / 0.36);
486
- @dt-radio-color-border-checked: #7C52FF;
487
- @dt-radio-color-background-checked: #7C52FF;
532
+ @dt-radio-color-border-checked: #C2A3FF;
533
+ @dt-radio-color-background-checked: #AB7EFF;
534
+ @dt-radio-color-foreground-default: transparent;
535
+ @dt-radio-color-foreground-checked: #000000;