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

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 +1376 -5085
  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 +131 -1363
  5. package/dist/css/dialtone.min.css +1 -1
  6. package/dist/css/tokens/tokens-base-dark.css +138 -453
  7. package/dist/css/tokens/tokens-base-deca-dark.css +15 -15
  8. package/dist/css/tokens/tokens-base-deca-light.css +12 -12
  9. package/dist/css/tokens/tokens-base-light.css +104 -419
  10. package/dist/css/tokens/tokens-debug-base.css +2 -317
  11. package/dist/css/tokens/tokens-debug-dp.css +663 -999
  12. package/dist/css/tokens/tokens-deca-dark.css +669 -676
  13. package/dist/css/tokens/tokens-deca-light.css +613 -620
  14. package/dist/css/tokens/tokens-dp-dark.css +910 -1246
  15. package/dist/css/tokens/tokens-dp-light.css +971 -1307
  16. package/dist/css/tokens/tokens-expressive-dark.css +911 -1247
  17. package/dist/css/tokens/tokens-expressive-light.css +968 -1304
  18. package/dist/css/tokens/tokens-expressive-sm-dark.css +911 -1247
  19. package/dist/css/tokens/tokens-expressive-sm-light.css +968 -1304
  20. package/dist/css/tokens/tokens-tmo-dark.css +896 -1232
  21. package/dist/css/tokens/tokens-tmo-light.css +923 -1259
  22. package/dist/css/tokens-docs.json +1 -1
  23. package/dist/tokens/css/tokens-base-dark.css +138 -453
  24. package/dist/tokens/css/tokens-base-deca-dark.css +15 -15
  25. package/dist/tokens/css/tokens-base-deca-light.css +12 -12
  26. package/dist/tokens/css/tokens-base-light.css +104 -419
  27. package/dist/tokens/css/tokens-debug-base.css +2 -317
  28. package/dist/tokens/css/tokens-debug-dp.css +663 -999
  29. package/dist/tokens/css/tokens-deca-dark.css +669 -676
  30. package/dist/tokens/css/tokens-deca-light.css +613 -620
  31. package/dist/tokens/css/tokens-dp-dark.css +910 -1246
  32. package/dist/tokens/css/tokens-dp-light.css +971 -1307
  33. package/dist/tokens/css/tokens-expressive-dark.css +911 -1247
  34. package/dist/tokens/css/tokens-expressive-light.css +968 -1304
  35. package/dist/tokens/css/tokens-expressive-sm-dark.css +911 -1247
  36. package/dist/tokens/css/tokens-expressive-sm-light.css +968 -1304
  37. package/dist/tokens/css/tokens-tmo-dark.css +896 -1232
  38. package/dist/tokens/css/tokens-tmo-light.css +923 -1259
  39. package/dist/tokens/doc.json +70310 -88972
  40. package/dist/tokens/less/tokens-base-dark.less +40 -85
  41. package/dist/tokens/less/tokens-base-deca-dark.less +6 -6
  42. package/dist/tokens/less/tokens-base-deca-light.less +5 -5
  43. package/dist/tokens/less/tokens-base-light.less +30 -75
  44. package/dist/tokens/less/tokens-deca-dark.less +120 -121
  45. package/dist/tokens/less/tokens-deca-light.less +99 -100
  46. package/dist/tokens/less/tokens-dp-dark.less +184 -232
  47. package/dist/tokens/less/tokens-dp-light.less +183 -231
  48. package/dist/tokens/less/tokens-expressive-dark.less +178 -226
  49. package/dist/tokens/less/tokens-expressive-light.less +177 -225
  50. package/dist/tokens/less/tokens-expressive-sm-dark.less +178 -226
  51. package/dist/tokens/less/tokens-expressive-sm-light.less +177 -225
  52. package/dist/tokens/less/tokens-tmo-dark.less +182 -230
  53. package/dist/tokens/less/tokens-tmo-light.less +166 -214
  54. package/dist/tokens/themes/chunks/tokens-base-dark-BnTEKGxK.js +4 -0
  55. package/dist/tokens/themes/chunks/tokens-base-dark-Ch4dTh7V.js +1 -0
  56. package/dist/tokens/themes/chunks/tokens-base-light-BLxKOiup.js +4 -0
  57. package/dist/tokens/themes/chunks/tokens-base-light-DWLxg2cD.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 +1 -1
  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 +40 -85
  81. package/dist/tokens/tokens-base-deca-dark.json +4 -4
  82. package/dist/tokens/tokens-base-deca-light.json +3 -3
  83. package/dist/tokens/tokens-base-light.json +30 -75
  84. package/dist/tokens/tokens-deca-dark.json +117 -118
  85. package/dist/tokens/tokens-deca-light.json +97 -98
  86. package/dist/tokens/tokens-dp-dark.json +171 -219
  87. package/dist/tokens/tokens-dp-light.json +182 -230
  88. package/dist/tokens/tokens-expressive-dark.json +165 -213
  89. package/dist/tokens/tokens-expressive-light.json +176 -224
  90. package/dist/tokens/tokens-expressive-sm-dark.json +165 -213
  91. package/dist/tokens/tokens-expressive-sm-light.json +176 -224
  92. package/dist/tokens/tokens-tmo-dark.json +169 -217
  93. package/dist/tokens/tokens-tmo-light.json +159 -207
  94. package/package.json +3 -3
  95. package/dist/tokens/themes/chunks/tokens-base-dark-BOzMety-.js +0 -4
  96. package/dist/tokens/themes/chunks/tokens-base-dark-DQw_GZ7j.js +0 -1
  97. package/dist/tokens/themes/chunks/tokens-base-light-BHyHG_ZV.js +0 -4
  98. package/dist/tokens/themes/chunks/tokens-base-light-DMUiSUFR.js +0 -1
@@ -2,52 +2,66 @@
2
2
  // Do not edit directly, this file was auto-generated.
3
3
 
4
4
  @dt-size-border-focus: 0.3rem;
5
- @dt-color-foreground-primary: #ff0000;
5
+ @dt-color-foreground-primary: #E6E6E6; // Default text color throughout the UI.
6
6
  @dt-color-foreground-secondary: #c7c7c7; // Example uses include introduction paragraphs, labels, and descriptions paired with form elements.
7
7
  @dt-color-foreground-tertiary: #B0B0B0; // Used to imply visual hierarchy relative to primary and secondary text colors, e.g. headlines and labels.
8
- @dt-color-foreground-muted: hsl(0 0% 83.1% / 0.6);
9
- @dt-color-foreground-placeholder: #B0B0B0;
10
- @dt-color-foreground-disabled: #B0B0B0;
8
+ @dt-color-foreground-muted: hsl(0 0% 100% / 0.5);
9
+ @dt-color-foreground-placeholder: #808080; // Text color for placeholder text within form elements.
10
+ @dt-color-foreground-disabled: #808080; // Used for text paired with disabled content or components, like the form elements.
11
11
  @dt-color-foreground-critical: #FF716F;
12
12
  @dt-color-foreground-critical-strong: #FFABA4;
13
13
  @dt-color-foreground-success: #AEFB3C;
14
14
  @dt-color-foreground-success-strong: #DBFFA9;
15
15
  @dt-color-foreground-warning: #FFBD48;
16
- @dt-color-foreground-primary-inverted: #000000;
16
+ @dt-color-foreground-primary-inverted: #171717; // Primary text that sits on high-contrast surfaces or backgrounds.
17
17
  @dt-color-foreground-secondary-inverted: #3d3d3d;
18
18
  @dt-color-foreground-tertiary-inverted: #555555;
19
19
  @dt-color-foreground-muted-inverted: hsl(0 0% 9.02% / 0.65); // Muted text color that sits on high-contrast surfaces or backgrounds.
20
20
  @dt-color-foreground-placeholder-inverted: #555555; // Placeholder text color that sits on high-contrast surfaces or backgrounds.
21
21
  @dt-color-foreground-disabled-inverted: #555555; // Disabled text color that sits on high-contrast surfaces or backgrounds.
22
22
  @dt-color-foreground-critical-inverted: #FF1356;
23
- @dt-color-foreground-critical-strong-inverted: #640823; // Critical strong text that sits on high-contrast surfaces or backgrounds
23
+ @dt-color-foreground-critical-strong-inverted: #AF0032;
24
24
  @dt-color-foreground-success-inverted: #008E52;
25
25
  @dt-color-foreground-success-strong-inverted: #004F2E;
26
26
  @dt-color-foreground-warning-inverted: #815008;
27
27
  @dt-color-link-primary: #C2A3FF;
28
- @dt-color-link-primary-hover: #DAC7FF;
29
28
  @dt-color-link-critical: #FF716F;
30
- @dt-color-link-critical-hover: #FFABA4;
31
29
  @dt-color-link-success: #AEFB3C; // positive
32
- @dt-color-link-success-hover: #DBFFA9;
33
30
  @dt-color-link-warning: #FFBD48;
34
- @dt-color-link-warning-hover: #FFE89C;
35
31
  @dt-color-link-muted: #c7c7c7;
36
- @dt-color-link-muted-hover: #ff0000;
37
- @dt-color-link-disabled: #B0B0B0;
38
- @dt-color-link-disabled-hover: #B0B0B0;
32
+ @dt-color-link-disabled: #808080;
39
33
  @dt-color-link-primary-inverted: #7C52FF;
40
- @dt-color-link-primary-inverted-hover: #5023DD;
41
34
  @dt-color-link-critical-inverted: #FF1356;
42
- @dt-color-link-critical-inverted-hover: #640823;
43
35
  @dt-color-link-success-inverted: #008E52;
44
- @dt-color-link-success-inverted-hover: #004F2E;
45
36
  @dt-color-link-warning-inverted: #815008;
46
- @dt-color-link-warning-inverted-hover: #533204;
47
37
  @dt-color-link-muted-inverted: #3d3d3d;
48
- @dt-color-link-muted-inverted-hover: #171717;
49
38
  @dt-color-link-disabled-inverted: #555555;
39
+ @dt-color-link-primary-hover: #DAC7FF;
40
+ @dt-color-link-critical-hover: #FFABA4;
41
+ @dt-color-link-success-hover: #DBFFA9;
42
+ @dt-color-link-warning-hover: #FFE89C;
43
+ @dt-color-link-muted-hover: #E6E6E6;
44
+ @dt-color-link-disabled-hover: #808080;
45
+ @dt-color-link-primary-inverted-hover: #5023DD;
46
+ @dt-color-link-critical-inverted-hover: #AF0032;
47
+ @dt-color-link-success-inverted-hover: #004F2E;
48
+ @dt-color-link-warning-inverted-hover: #533204;
49
+ @dt-color-link-muted-inverted-hover: #171717;
50
50
  @dt-color-link-disabled-inverted-hover: #555555;
51
+ @dt-color-surface-secondary-opaque: hsl(0 0% 90.2% / 0.03);
52
+ @dt-color-surface-moderate-opaque: hsl(0 0% 90.2% / 0.18);
53
+ @dt-color-surface-bold-opaque: hsl(0 0% 90.2% / 0.3);
54
+ @dt-color-surface-strong-opaque: hsl(0 0% 90.2% / 0.74);
55
+ @dt-color-surface-contrast-opaque: hsl(0 0% 100% / 0.97);
56
+ @dt-color-surface-backdrop: hsl(0 0% 0% / 0.65); // Background color for a modal-like backdrop.
57
+ @dt-color-surface-critical-opaque: hsl(343 72.9% 33.3% / 0.2);
58
+ @dt-color-surface-critical-subtle-opaque: hsl(344 93.1% 5.69% / 0.6);
59
+ @dt-color-surface-warning-opaque: hsl(34.9 90.8% 17.1% / 0.35);
60
+ @dt-color-surface-warning-subtle-opaque: hsl(34.8 93.9% 6.47% / 0.7);
61
+ @dt-color-surface-success-opaque: hsl(155 100% 15.5% / 0.28);
62
+ @dt-color-surface-success-subtle-opaque: hsl(157 100% 4.12% / 0.6);
63
+ @dt-color-surface-info-opaque: hsl(211 100% 8.04% / 0.4);
64
+ @dt-color-surface-info-subtle-opaque: hsl(211 91.3% 4.51% / 0.7);
51
65
  @dt-color-surface-primary: #171717;
52
66
  @dt-color-surface-secondary: #1f1f1f;
53
67
  @dt-color-surface-moderate: #3d3d3d;
@@ -55,109 +69,94 @@
55
69
  @dt-color-surface-strong: #B0B0B0;
56
70
  @dt-color-surface-contrast: #ffffff;
57
71
  @dt-color-surface-critical: #380010; // Background surface color containing error, danger, or otherwise critical messaging or elements.
58
- @dt-color-surface-warning: #2C1B02; // Background surface color highlighting messaging or elements that may require user's attention.
59
- @dt-color-surface-success: #012717; // Background surface color containing messaging or elements expressing a positive or successful state.
60
- @dt-color-surface-info: #001429; // Background surface color containing messaging or elements communicated as generally informational.
61
- @dt-color-surface-brand: #1D0155; // Background surface color containing messaging or elements communicated as generally informational.
62
- @dt-color-surface-critical-subtle: hsl(343 100% 5.49%);
63
- @dt-color-surface-warning-subtle: hsl(35.7 91.3% 4.51%);
64
- @dt-color-surface-success-subtle: hsl(155 95% 3.92%);
65
- @dt-color-surface-info-subtle: hsl(211 100% 4.82%);
66
- @dt-color-surface-brand-subtle: #0E002A; // A softer version of the default informational surface.
72
+ @dt-color-surface-critical-subtle: #1C0108; // A softer version of the Critical surface.
67
73
  @dt-color-surface-critical-strong: #FF716F;
74
+ @dt-color-surface-warning: #2C1B02; // Background surface color highlighting messaging or elements that may require user's attention.
75
+ @dt-color-surface-warning-subtle: #201301; // A softer version of the default warning surface.
68
76
  @dt-color-surface-warning-strong: #FFDB80;
77
+ @dt-color-surface-success: #012717; // Background surface color containing messaging or elements expressing a positive or successful state.
78
+ @dt-color-surface-success-subtle: #00150D; // A softer version of the default success surface.
69
79
  @dt-color-surface-success-strong: #AEFB3C;
80
+ @dt-color-surface-info: #001429; // Background surface color containing messaging or elements communicated as generally informational.
81
+ @dt-color-surface-info-subtle: #010B16; // A softer version of the default informational surface.
70
82
  @dt-color-surface-info-strong: #4AA9EA;
71
- @dt-color-surface-brand-strong: #AB7EFF;
72
- @dt-color-surface-primary-opaque: hsl(0 0% 9.02% / 0.9);
73
- @dt-color-surface-secondary-opaque: hsl(0 0% 90.2% / 0.03);
74
- @dt-color-surface-moderate-opaque: hsl(0 0% 90.2% / 0.18);
75
- @dt-color-surface-bold-opaque: hsl(0 0% 90.2% / 0.3);
76
- @dt-color-surface-strong-opaque: hsl(0 0% 90.2% / 0.74);
77
- @dt-color-surface-contrast-opaque: hsl(0 0% 100% / 0.97);
78
- @dt-color-surface-critical-opaque: hsl(343 72.9% 33.3% / 0.2);
79
- @dt-color-surface-warning-opaque: hsl(34.9 90.8% 17.1% / 0.35);
80
- @dt-color-surface-success-opaque: hsl(155 100% 15.5% / 0.28);
81
- @dt-color-surface-info-opaque: hsl(211 100% 8.04% / 0.4);
82
- @dt-color-surface-brand-opaque: hsl(260 97.7% 16.9% / 0.7);
83
- @dt-color-surface-critical-subtle-opaque: hsl(344 93.1% 5.69% / 0.6);
84
- @dt-color-surface-warning-subtle-opaque: hsl(34.8 93.9% 6.47% / 0.7);
85
- @dt-color-surface-success-subtle-opaque: hsl(157 100% 4.12% / 0.6);
86
- @dt-color-surface-info-subtle-opaque: hsl(211 91.3% 4.51% / 0.7);
87
- @dt-color-surface-brand-subtle-opaque: hsl(260 100% 8.24% / 0.65);
88
- @dt-color-surface-primary-inverted: #ffffff; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
89
83
  @dt-color-surface-secondary-inverted: #F9F9F9;
90
84
  @dt-color-surface-moderate-inverted: #E6E6E6;
91
85
  @dt-color-surface-bold-inverted: #D4D4D4;
92
86
  @dt-color-surface-strong-inverted: #555555; // Use sparingly to draw the eye to a relatively important region.
93
87
  @dt-color-surface-contrast-inverted: #171717; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
88
+ @dt-color-surface-primary-inverted: #ffffff; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
94
89
  @dt-color-surface-critical-inverted: #FFE5E6; // Background surface color containing error, danger, or otherwise critical messaging or elements.
90
+ @dt-color-surface-critical-subtle-inverted: #FFF2F3; // A softer version of the Critical surface.
91
+ @dt-color-surface-critical-strong-inverted: #D90A45;
95
92
  @dt-color-surface-warning-inverted: #FFF4CC; // Background surface color highlighting messaging or elements that may require user's attention.
93
+ @dt-color-surface-warning-subtle-inverted: #fffae5; // A softer version of the default warning surface.
94
+ @dt-color-surface-warning-strong-inverted: #FFBD48;
96
95
  @dt-color-surface-success-inverted: #EDF9EB; // Background surface color containing messaging or elements expressing a positive or successful state.
96
+ @dt-color-surface-success-subtle-inverted: #f6fcf5; // A softer version of the default success surface.
97
+ @dt-color-surface-success-strong-inverted: #31B237; // A contrasting positive state surface, most likely paired with inverted foreground colors.
97
98
  @dt-color-surface-info-inverted: #EAF2FA; // Background surface color containing messaging or elements communicated as generally informational.
99
+ @dt-color-surface-brand: #1D0155; // Background surface color containing messaging or elements communicated as generally informational.
98
100
  @dt-color-surface-brand-inverted: #F5F0FF; // Background surface color containing messaging or elements communicated as generally informational.
99
- @dt-color-surface-critical-subtle-inverted: #FFF2F3; // A softer version of the Critical surface.
100
- @dt-color-surface-warning-subtle-inverted: #fffae5; // A softer version of the default warning surface.
101
- @dt-color-surface-success-subtle-inverted: #f6fcf5; // A softer version of the default success surface.
102
101
  @dt-color-surface-info-subtle-inverted: #f5f9fd; // A softer version of the default informational surface.
102
+ @dt-color-surface-brand-subtle: #0E002A; // A softer version of the default informational surface.
103
103
  @dt-color-surface-brand-subtle-inverted: #f9f6ff; // A softer version of the default informational surface.
104
- @dt-color-surface-critical-strong-inverted: #D90A45;
105
- @dt-color-surface-warning-strong-inverted: #FFBD48;
106
- @dt-color-surface-success-strong-inverted: #31B237; // A contrasting positive state surface, most likely paired with inverted foreground colors.
107
104
  @dt-color-surface-info-strong-inverted: #1768C6;
105
+ @dt-color-surface-brand-strong: #AB7EFF;
108
106
  @dt-color-surface-brand-strong-inverted: #7C52FF;
109
- @dt-color-surface-primary-opaque-inverted: hsl(0 0% 100% / 0.85); // Secondary surface as opaque background color.
110
- @dt-color-surface-secondary-opaque-inverted: hsl(0 100% 50% / 0.04);
111
- @dt-color-surface-moderate-opaque-inverted: hsl(0 100% 50% / 0.11);
112
- @dt-color-surface-bold-opaque-inverted: hsl(0 100% 50% / 0.18);
113
- @dt-color-surface-strong-opaque-inverted: hsl(0 100% 50% / 0.67); // Strong surface as opaque background color.
114
- @dt-color-surface-contrast-opaque-inverted: hsl(0 100% 50% / 0.97); // Contrast surface as opaque background color.
107
+ @dt-color-surface-primary-opaque: hsl(0 0% 100% / 0.96);
108
+ @dt-color-surface-secondary-opaque-inverted: hsl(0 0% 0% / 0.04);
109
+ @dt-color-surface-moderate-opaque-inverted: hsl(0 0% 0% / 0.11);
110
+ @dt-color-surface-bold-opaque-inverted: hsl(0 0% 0% / 0.18);
111
+ @dt-color-surface-strong-opaque-inverted: hsl(0 0% 0% / 0.67); // Strong surface as opaque background color.
112
+ @dt-color-surface-contrast-opaque-inverted: hsl(0 0% 0% / 0.97); // Contrast surface as opaque background color.
115
113
  @dt-color-surface-critical-opaque-inverted: hsl(4.62 100% 82.2% / 0.5);
114
+ @dt-color-surface-critical-subtle-opaque-inverted: hsl(358 100% 94.9% / 0.8);
116
115
  @dt-color-surface-warning-opaque-inverted: hsl(46.1 100% 80.6% / 0.5);
116
+ @dt-color-surface-warning-subtle-opaque-inverted: hsl(48.5 100% 94.9% / 0.7); // Warning subtle surface as opaque background color
117
117
  @dt-color-surface-success-opaque-inverted: hsl(85.1 100% 83.1% / 0.3); // Success surface as opaque background color.
118
+ @dt-color-surface-success-subtle-opaque-inverted: hsl(111 53.8% 97.5% / 0.66); // Success subtle surface as opaque background color.
118
119
  @dt-color-surface-info-opaque-inverted: hsl(210 61.5% 94.9% / 0.6); // Info surface as opaque background color.
120
+ @dt-color-surface-brand-opaque: hsl(260 97.7% 16.9% / 0.7);
119
121
  @dt-color-surface-brand-opaque-inverted: hsl(260 100% 97.1% / 0.8); // Info surface as opaque background color.
120
- @dt-color-surface-critical-subtle-opaque-inverted: hsl(358 100% 94.9% / 0.8);
121
- @dt-color-surface-warning-subtle-opaque-inverted: hsl(48.5 100% 94.9% / 0.7); // Warning subtle surface as opaque background color
122
- @dt-color-surface-success-subtle-opaque-inverted: hsl(111 53.8% 97.5% / 0.66); // Success subtle surface as opaque background color.
123
122
  @dt-color-surface-info-subtle-opaque-inverted: hsl(210 66.7% 97.6% / 0.66); // Info surface as opaque background color.
123
+ @dt-color-surface-brand-subtle-opaque: hsl(260 100% 8.24% / 0.65);
124
124
  @dt-color-surface-brand-subtle-opaque-inverted: hsl(260 100% 98.2% / 0.66); // Info surface as opaque background color.
125
- @dt-color-surface-backdrop: hsl(0 0% 0% / 0.65); // Background color for a modal-like backdrop.
126
125
  @dt-color-border-subtle: hsl(0 0% 100% / 0.14);
127
126
  @dt-color-border-default: hsl(0 0% 100% / 0.22);
128
127
  @dt-color-border-moderate: hsl(0 0% 100% / 0.36);
129
128
  @dt-color-border-bold: hsl(0 0% 100% / 0.5);
129
+ @dt-color-border-subtle-inverted: hsl(0 0% 0% / 0.1);
130
+ @dt-color-border-default-inverted: hsl(0 0% 0% / 0.18);
131
+ @dt-color-border-moderate-inverted: hsl(0 0% 0% / 0.34);
132
+ @dt-color-border-bold-inverted: hsl(0 0% 0% / 0.5);
133
+ @dt-color-border-focus: #1768C6;
130
134
  @dt-color-border-critical: #FF716F;
131
135
  @dt-color-border-success: #D1FF76;
132
136
  @dt-color-border-warning: #FFDB80;
133
137
  @dt-color-border-brand: #C2A3FF;
138
+ @dt-color-border-ai: linear-gradient(135deg, #FF1BA4 10%, #7C52FF 90%);
139
+ @dt-color-border-accent: #FF1BA4;
134
140
  @dt-color-border-critical-subtle: #93173A;
135
- @dt-color-border-success-subtle: #52C926;
136
- @dt-color-border-warning-subtle: #FF9E0E;
137
- @dt-color-border-brand-subtle: #7C52FF;
138
141
  @dt-color-border-critical-strong: #FFABA4;
142
+ @dt-color-border-success-subtle: #52C926;
139
143
  @dt-color-border-success-strong: #AEFB3C;
144
+ @dt-color-border-warning-subtle: #FF9E0E;
140
145
  @dt-color-border-warning-strong: #FFE89C;
146
+ @dt-color-border-brand-subtle: #7C52FF;
141
147
  @dt-color-border-brand-strong: #DAC7FF;
142
- @dt-color-border-subtle-inverted: hsl(0 0% 0% / 0.1);
143
- @dt-color-border-default-inverted: hsl(0 0% 0% / 0.18);
144
- @dt-color-border-moderate-inverted: hsl(0 0% 0% / 0.34);
145
- @dt-color-border-bold-inverted: hsl(0 0% 0% / 0.5);
146
148
  @dt-color-border-critical-inverted: #FF1356;
147
149
  @dt-color-border-success-inverted: #31B237;
148
150
  @dt-color-border-warning-inverted: #FF9E0E;
149
151
  @dt-color-border-brand-inverted: #7C52FF;
150
152
  @dt-color-border-critical-subtle-inverted: #FF716F;
151
- @dt-color-border-success-subtle-inverted: #D1FF76;
152
- @dt-color-border-warning-subtle-inverted: #FFDB80;
153
- @dt-color-border-brand-subtle-inverted: #C2A3FF;
154
153
  @dt-color-border-critical-strong-inverted: #93173A;
154
+ @dt-color-border-success-subtle-inverted: #D1FF76;
155
155
  @dt-color-border-success-strong-inverted: #004F2E;
156
+ @dt-color-border-warning-subtle-inverted: #FFDB80;
156
157
  @dt-color-border-warning-strong-inverted: #D57F00;
158
+ @dt-color-border-brand-subtle-inverted: #C2A3FF;
157
159
  @dt-color-border-brand-strong-inverted: #5023DD;
158
- @dt-color-border-focus: #1768C6;
159
- @dt-color-border-ai: linear-gradient(135deg, #FF1BA4 10%, #ff0000 90%);
160
- @dt-color-border-accent: #FF1BA4;
161
160
  @dt-typography-body-md-font-family: -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.
162
161
  @dt-typography-body-md-font-weight: 400; // Base default medium text style for main content.
163
162
  @dt-typography-body-md-line-height: 1.6; // Base default medium text style for main content.
@@ -375,9 +374,9 @@
375
374
  @dt-inputs-font-weight-md: 400; // Font weight for medium inputs (e.g. input and textarea)
376
375
  @dt-inputs-font-weight-lg: 400; // Font weight for large inputs (e.g. input and textarea)
377
376
  @dt-inputs-font-weight-xl: 400; // Font weight for extra large inputs (e.g. input and textarea)
378
- @dt-inputs-color-foreground-default: #ff0000;
379
- @dt-inputs-color-foreground-placeholder: #B0B0B0;
380
- @dt-inputs-color-foreground-disabled: #B0B0B0;
377
+ @dt-inputs-color-foreground-default: #c7c7c7;
378
+ @dt-inputs-color-foreground-placeholder: #808080;
379
+ @dt-inputs-color-foreground-disabled: #808080;
381
380
  @dt-inputs-color-border-default: hsl(0 0% 100% / 0.22);
382
381
  @dt-inputs-color-border-focus: #1768C6;
383
382
  @dt-inputs-color-border-critical: #FF716F;
@@ -390,25 +389,25 @@
390
389
  @dt-action-color-foreground-base-default: #C2A3FF;
391
390
  @dt-action-color-foreground-base-hover: #DAC7FF;
392
391
  @dt-action-color-foreground-base-active: #DAC7FF;
393
- @dt-action-color-foreground-base-primary-default: #ff0000;
392
+ @dt-action-color-foreground-base-primary-default: #000000;
394
393
  @dt-action-color-foreground-critical-default: #FF716F;
395
394
  @dt-action-color-foreground-critical-hover: #FFABA4;
396
395
  @dt-action-color-foreground-critical-active: #FFABA4;
397
- @dt-action-color-foreground-critical-primary-default: #ff0000;
398
- @dt-action-color-foreground-inverted-default: #000000;
399
- @dt-action-color-foreground-inverted-hover: #000000;
400
- @dt-action-color-foreground-inverted-active: #000000;
396
+ @dt-action-color-foreground-critical-primary-default: #000000;
397
+ @dt-action-color-foreground-inverted-default: #171717;
398
+ @dt-action-color-foreground-inverted-hover: #171717;
399
+ @dt-action-color-foreground-inverted-active: #171717;
401
400
  @dt-action-color-foreground-inverted-primary-default: #C2A3FF;
402
401
  @dt-action-color-foreground-inverted-primary-hover: #DAC7FF;
403
402
  @dt-action-color-foreground-inverted-primary-active: #DAC7FF;
404
403
  @dt-action-color-foreground-muted-default: #c7c7c7;
405
- @dt-action-color-foreground-muted-hover: #ff0000;
406
- @dt-action-color-foreground-muted-active: #ff0000;
407
- @dt-action-color-foreground-disabled-default: #B0B0B0;
404
+ @dt-action-color-foreground-muted-hover: #E6E6E6;
405
+ @dt-action-color-foreground-muted-active: #E6E6E6;
406
+ @dt-action-color-foreground-disabled-default: #808080;
408
407
  @dt-action-color-foreground-positive-default: #AEFB3C;
409
408
  @dt-action-color-foreground-positive-hover: #DBFFA9;
410
409
  @dt-action-color-foreground-positive-active: #DBFFA9;
411
- @dt-action-color-foreground-positive-primary-default: #ff0000;
410
+ @dt-action-color-foreground-positive-primary-default: #000000;
412
411
  @dt-action-color-background-base-default: transparent;
413
412
  @dt-action-color-background-base-hover: hsl(258 100% 70.4% / 0.2);
414
413
  @dt-action-color-background-base-active: hsl(258 100% 70.4% / 0.3);
@@ -441,44 +440,44 @@
441
440
  @dt-action-color-border-critical-outlined-default: #FF716F;
442
441
  @dt-action-color-border-inverted-outlined-default: hsl(0 0% 0% / 0.18);
443
442
  @dt-action-color-border-muted-outlined-default: hsl(0 0% 100% / 0.22);
444
- @dt-theme-color-base: #ff0000;
445
- @dt-theme-topbar-color-foreground: hsl(0 100% 50% / 0.8);
443
+ @dt-theme-color-base: #E6E6E6;
444
+ @dt-theme-topbar-color-foreground: hsl(0 0% 90.2% / 0.8);
446
445
  @dt-theme-topbar-color-background: #1f1f1f;
447
- @dt-theme-topbar-field-color-foreground: hsl(0 100% 50% / 0.5);
448
- @dt-theme-topbar-field-color-foreground-hover: hsl(0 100% 50% / 0.75);
449
- @dt-theme-topbar-field-color-background: hsl(0 100% 50% / 0.05);
446
+ @dt-theme-topbar-field-color-foreground: hsl(0 0% 90.2% / 0.5);
447
+ @dt-theme-topbar-field-color-foreground-hover: hsl(0 0% 90.2% / 0.75);
448
+ @dt-theme-topbar-field-color-background: hsl(0 0% 90.2% / 0.05);
450
449
  @dt-theme-topbar-field-color-background-hover: hsl(0 0% 8.27%);
451
- @dt-theme-topbar-field-color-border: hsl(0 100% 50% / 0);
452
- @dt-theme-topbar-field-color-border-hover: hsl(0 100% 50% / 0.1);
453
- @dt-theme-topbar-field-color-border-active: hsl(0 100% 50% / 0.2);
454
- @dt-theme-topbar-button-color-foreground: hsl(0 100% 50% / 0.65);
455
- @dt-theme-topbar-button-color-foreground-hover: #ff0000;
456
- @dt-theme-topbar-button-color-background: hsl(0 100% 50% / 0);
457
- @dt-theme-topbar-button-color-background-hover: hsl(0 100% 50% / 0.15);
458
- @dt-theme-topbar-button-color-background-active: hsl(0 100% 50% / 0.1);
459
- @dt-theme-topbar-profile-color-foreground: hsl(0 100% 50% / 0.8);
460
- @dt-theme-topbar-profile-color-foreground-inverted: hsl(0 0% 0% / 0.75);
461
- @dt-theme-topbar-profile-color-background: hsl(0 100% 50% / 0.05);
462
- @dt-theme-topbar-profile-color-background-inverted: hsl(0 100% 50% / 0.75);
463
- @dt-theme-topbar-profile-color-background-hover: hsl(0 100% 50% / 0.1);
464
- @dt-theme-topbar-profile-color-background-active: hsl(0 100% 50% / 0.14);
450
+ @dt-theme-topbar-field-color-border: hsl(0 0% 90.2% / 0);
451
+ @dt-theme-topbar-field-color-border-hover: hsl(0 0% 90.2% / 0.1);
452
+ @dt-theme-topbar-field-color-border-active: hsl(0 0% 90.2% / 0.2);
453
+ @dt-theme-topbar-button-color-foreground: hsl(0 0% 90.2% / 0.65);
454
+ @dt-theme-topbar-button-color-foreground-hover: #E6E6E6;
455
+ @dt-theme-topbar-button-color-background: hsl(0 0% 90.2% / 0);
456
+ @dt-theme-topbar-button-color-background-hover: hsl(0 0% 90.2% / 0.15);
457
+ @dt-theme-topbar-button-color-background-active: hsl(0 0% 90.2% / 0.1);
458
+ @dt-theme-topbar-profile-color-foreground: hsl(0 0% 90.2% / 0.8);
459
+ @dt-theme-topbar-profile-color-foreground-inverted: hsl(0 0% 9.02% / 0.75);
460
+ @dt-theme-topbar-profile-color-background: hsl(0 0% 90.2% / 0.05);
461
+ @dt-theme-topbar-profile-color-background-inverted: hsl(0 0% 90.2% / 0.75);
462
+ @dt-theme-topbar-profile-color-background-hover: hsl(0 0% 90.2% / 0.1);
463
+ @dt-theme-topbar-profile-color-background-active: hsl(0 0% 90.2% / 0.14);
465
464
  @dt-theme-sidebar-color-foreground: #c7c7c7;
466
- @dt-theme-sidebar-color-foreground-unread: #ff0000;
465
+ @dt-theme-sidebar-color-foreground-unread: #E6E6E6;
467
466
  @dt-theme-sidebar-color-background: #1f1f1f;
468
467
  @dt-theme-sidebar-icon-color-foreground: #c7c7c7;
469
468
  @dt-theme-sidebar-status-color-foreground: #B0B0B0;
470
- @dt-theme-sidebar-row-color-background: hsl(0 100% 50% / 0);
471
- @dt-theme-sidebar-row-color-background-hover: hsl(0 100% 50% / 0.1);
472
- @dt-theme-sidebar-row-color-background-active: hsl(0 100% 50% / 0.15);
473
- @dt-theme-sidebar-selected-row-color-foreground: #ff0000;
474
- @dt-theme-sidebar-selected-row-color-background: hsl(0 100% 50% / 0.12);
469
+ @dt-theme-sidebar-row-color-background: hsl(0 0% 90.2% / 0);
470
+ @dt-theme-sidebar-row-color-background-hover: hsl(0 0% 90.2% / 0.1);
471
+ @dt-theme-sidebar-row-color-background-active: hsl(0 0% 90.2% / 0.15);
472
+ @dt-theme-sidebar-selected-row-color-foreground: #E6E6E6;
473
+ @dt-theme-sidebar-selected-row-color-background: hsl(0 0% 90.2% / 0.12);
475
474
  @dt-theme-sidebar-section-color-foreground: #B0B0B0;
476
475
  @dt-theme-presence-color-background-available: #84EE0B;
477
476
  @dt-theme-presence-color-background-busy-unavailable: #FF415B;
478
477
  @dt-theme-presence-color-background-busy: #FFBD48;
479
478
  @dt-theme-presence-color-background-offline: #ffffff;
480
- @dt-theme-mention-color-foreground: #ff0000;
481
- @dt-theme-mention-color-foreground-strong: #000000;
479
+ @dt-theme-mention-color-foreground: #000000;
480
+ @dt-theme-mention-color-foreground-strong: #171717;
482
481
  @dt-theme-mention-color-background: #AB7EFF;
483
482
  @dt-theme-mention-color-background-strong: #F5F0FF;
484
483
  @dt-avatar-color-foreground: #000000;
@@ -508,10 +507,10 @@
508
507
  @dt-badge-color-background-critical: #640823;
509
508
  @dt-badge-color-background-bulletin: #AB7EFF;
510
509
  @dt-badge-color-background-bulletin-subtle: #3A1D95;
511
- @dt-badge-color-background-ai: linear-gradient(135deg, #FF1BA4 10%, #ff0000 90%);
510
+ @dt-badge-color-background-ai: linear-gradient(135deg, #FF1BA4 10%, #7C52FF 90%);
512
511
  @dt-badge-color-foreground-default: #ffffff;
513
- @dt-badge-color-foreground-bulletin: #ff0000;
514
- @dt-badge-color-foreground-bulletin-subtle: hsl(0 100% 50%);
512
+ @dt-badge-color-foreground-bulletin: #000000;
513
+ @dt-badge-color-foreground-bulletin-subtle: hsl(0 0% 90.2%);
515
514
  @dt-badge-color-foreground-ai: #ffffff;
516
515
  @dt-badge-color-border-default: hsl(0 0% 100% / 0.14);
517
516
  @dt-badge-color-border-bulletin-subtle: hsl(258 100% 70.4% / 0.6);
@@ -520,9 +519,9 @@
520
519
  @dt-button-font-size-md: 15px; // Medium Button text size
521
520
  @dt-button-font-size-lg: 19px; // Large Button text size
522
521
  @dt-button-font-size-xl: 27px; // Extra large Button text size
523
- @dt-button-font-weight-xs: 600; // Font weight for XS button
524
- @dt-button-font-weight-sm: 600; // Font weight for SM button
525
- @dt-button-font-weight-md: 600; // Font weight for MD button
522
+ @dt-button-font-weight-xs: 600;
523
+ @dt-button-font-weight-sm: 600;
524
+ @dt-button-font-weight-md: 600;
526
525
  @dt-button-font-weight-lg: 500; // Font weight for LG button
527
526
  @dt-button-font-weight-xl: 400; // Font weight for XL button
528
527
  @dt-button-line-height-xs: 1.2; // Line-height for XS button
@@ -542,7 +541,7 @@
542
541
  @dt-checkbox-color-border-checked: #C2A3FF;
543
542
  @dt-checkbox-color-background-checked: #AB7EFF;
544
543
  @dt-checkbox-color-foreground-default: transparent;
545
- @dt-checkbox-color-foreground-checked: #000000;
544
+ @dt-checkbox-color-foreground-checked: #171717;
546
545
  @dt-icon-size-100: 12px;
547
546
  @dt-icon-size-200: 14px;
548
547
  @dt-icon-size-300: 18px;
@@ -566,4 +565,4 @@
566
565
  @dt-radio-color-border-checked: #C2A3FF;
567
566
  @dt-radio-color-background-checked: #AB7EFF;
568
567
  @dt-radio-color-foreground-default: transparent;
569
- @dt-radio-color-foreground-checked: #000000;
568
+ @dt-radio-color-foreground-checked: #171717;