@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,7 +2,7 @@
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: #1C1C1C; // Default text color throughout the UI.
6
6
  @dt-color-foreground-secondary: #3A3A3A; // Example uses include introduction paragraphs, labels, and descriptions paired with form elements.
7
7
  @dt-color-foreground-tertiary: #535353; // Used to imply visual hierarchy relative to primary and secondary text colors, e.g. headlines and labels.
8
8
  @dt-color-foreground-muted: hsl(0 0% 0% / 0.5);
@@ -19,35 +19,49 @@
19
19
  @dt-color-foreground-muted-inverted: hsl(0 0% 97.6% / 0.65); // Muted text color that sits on high-contrast surfaces or backgrounds.
20
20
  @dt-color-foreground-placeholder-inverted: #AAAAAA; // Placeholder text color that sits on high-contrast surfaces or backgrounds.
21
21
  @dt-color-foreground-disabled-inverted: #AAAAAA; // Disabled text color that sits on high-contrast surfaces or backgrounds.
22
- @dt-color-foreground-critical-inverted: #FF716F; // Critical text that sits on high-contrast surfaces or backgrounds
23
- @dt-color-foreground-critical-strong-inverted: #FFABA4; // Critical strong text that sits on high-contrast surfaces or backgrounds
22
+ @dt-color-foreground-critical-inverted: #FFABA4; // Critical text that sits on high-contrast surfaces or backgrounds
23
+ @dt-color-foreground-critical-strong-inverted: #FFE5E6; // Critical strong text that sits on high-contrast surfaces or backgrounds
24
24
  @dt-color-foreground-success-inverted: #AEFB3C; // Success text that sits on high-contrast surfaces or backgrounds
25
25
  @dt-color-foreground-success-strong-inverted: #DBFFA9; // Success strong text that sits on high-contrast surfaces or backgrounds
26
26
  @dt-color-foreground-warning-inverted: #FF9E0E; // Warning text that sits on high-contrast surfaces or backgrounds
27
27
  @dt-color-link-primary: #7C52FF;
28
- @dt-color-link-primary-hover: #5023DD;
29
28
  @dt-color-link-critical: #FF1356;
30
- @dt-color-link-critical-hover: #AF0032;
31
29
  @dt-color-link-success: #008E52; // positive
32
- @dt-color-link-success-hover: #004F2E;
33
30
  @dt-color-link-warning: #815008;
34
- @dt-color-link-warning-hover: #533204;
35
31
  @dt-color-link-muted: #3A3A3A;
36
- @dt-color-link-muted-hover: #ff0000;
37
32
  @dt-color-link-disabled: #808080;
38
- @dt-color-link-disabled-hover: #808080;
39
33
  @dt-color-link-primary-inverted: #C2A3FF;
40
- @dt-color-link-primary-inverted-hover: #DAC7FF;
41
- @dt-color-link-critical-inverted: #FF716F;
42
- @dt-color-link-critical-inverted-hover: #FFABA4;
34
+ @dt-color-link-critical-inverted: #FFABA4;
43
35
  @dt-color-link-success-inverted: #AEFB3C;
44
- @dt-color-link-success-inverted-hover: #DBFFA9;
45
36
  @dt-color-link-warning-inverted: #FF9E0E;
46
- @dt-color-link-warning-inverted-hover: #FFDB80;
47
37
  @dt-color-link-muted-inverted: #E9E9E9;
48
- @dt-color-link-muted-inverted-hover: #F9F9F9;
49
38
  @dt-color-link-disabled-inverted: #AAAAAA;
39
+ @dt-color-link-primary-hover: #5023DD;
40
+ @dt-color-link-critical-hover: #AF0032;
41
+ @dt-color-link-success-hover: #004F2E;
42
+ @dt-color-link-warning-hover: #533204;
43
+ @dt-color-link-muted-hover: #1C1C1C;
44
+ @dt-color-link-disabled-hover: #808080;
45
+ @dt-color-link-primary-inverted-hover: #DAC7FF;
46
+ @dt-color-link-critical-inverted-hover: #FFE5E6;
47
+ @dt-color-link-success-inverted-hover: #DBFFA9;
48
+ @dt-color-link-warning-inverted-hover: #FFDB80;
49
+ @dt-color-link-muted-inverted-hover: #F9F9F9;
50
50
  @dt-color-link-disabled-inverted-hover: #AAAAAA;
51
+ @dt-color-surface-secondary-opaque: hsl(0 0% 11% / 0.02); // Secondary surface as opaque background color.
52
+ @dt-color-surface-moderate-opaque: hsl(0 0% 11% / 0.1); // Moderate surface as opaque background color.
53
+ @dt-color-surface-bold-opaque: hsl(0 0% 11% / 0.19); // Bold surface as opaque background color.
54
+ @dt-color-surface-strong-opaque: hsl(0 0% 11% / 0.76); // Strong surface as opaque background color.
55
+ @dt-color-surface-contrast-opaque: hsl(0 0% 11% / 0.94); // Contrast surface as opaque background color.
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(4.62 100% 82.2% / 0.31); // Critical surface as opaque background color.
58
+ @dt-color-surface-critical-subtle-opaque: hsl(358 100% 94.9% / 0.5); // Critical subtle surface as opaque background color.
59
+ @dt-color-surface-warning-opaque: hsl(46.1 100% 80.6% / 0.5); // Warning surface as opaque background color
60
+ @dt-color-surface-warning-subtle-opaque: hsl(47.1 100% 90% / 0.5); // Warning subtle surface as opaque background color
61
+ @dt-color-surface-success-opaque: hsl(85.1 100% 83.1% / 0.25); // Success surface as opaque background color.
62
+ @dt-color-surface-success-subtle-opaque: hsl(111 53.8% 94.9% / 0.5); // Success subtle surface as opaque background color.
63
+ @dt-color-surface-info-opaque: hsl(201 100% 87.1% / 0.35); // Info surface as opaque background color.
64
+ @dt-color-surface-info-subtle-opaque: hsl(210 61.5% 94.9% / 0.5); // Info surface as opaque background color.
51
65
  @dt-color-surface-primary: #ffffff; // Default surface color for the majority of surfaces.
52
66
  @dt-color-surface-secondary: #F9F9F9; // For adjacent or complementary regions.
53
67
  @dt-color-surface-moderate: #E9E9E9; // A tertiary surface level, prominent without being too overpowering.
@@ -55,109 +69,94 @@
55
69
  @dt-color-surface-strong: #535353; // Use sparingly to draw the eye to a relatively important region.
56
70
  @dt-color-surface-contrast: #252525; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
57
71
  @dt-color-surface-critical: #FFE5E6; // Background surface color containing error, danger, or otherwise critical messaging or elements.
58
- @dt-color-surface-warning: #FFF4CC; // Background surface color highlighting messaging or elements that may require user's attention.
59
- @dt-color-surface-success: #EDF9EB; // Background surface color containing messaging or elements expressing a positive or successful state.
60
- @dt-color-surface-info: #EAF2FA; // Background surface color containing messaging or elements communicated as generally informational.
61
- @dt-color-surface-brand: #F5F0FF; // Background surface color containing messaging or elements communicated as generally informational.
62
72
  @dt-color-surface-critical-subtle: #FFF2F3; // A softer version of the Critical surface.
63
- @dt-color-surface-warning-subtle: #fffae5; // A softer version of the default warning surface.
64
- @dt-color-surface-success-subtle: #f6fcf5; // A softer version of the default success surface.
65
- @dt-color-surface-info-subtle: #f5f9fd; // A softer version of the default informational surface.
66
- @dt-color-surface-brand-subtle: #f9f6ff; // A softer version of the default informational surface.
67
73
  @dt-color-surface-critical-strong: #D90A45; // A contrasting critical surface, most likely paired with inverted foreground colors.
74
+ @dt-color-surface-warning: #FFF4CC; // Background surface color highlighting messaging or elements that may require user's attention.
75
+ @dt-color-surface-warning-subtle: #fffae5; // A softer version of the default warning surface.
68
76
  @dt-color-surface-warning-strong: #FFBD48; // A contrasting warning surface, most likely paired with inverted foreground colors.
77
+ @dt-color-surface-success: #EDF9EB; // Background surface color containing messaging or elements expressing a positive or successful state.
78
+ @dt-color-surface-success-subtle: #f6fcf5; // A softer version of the default success surface.
69
79
  @dt-color-surface-success-strong: #008E52; // A contrasting positive state surface, most likely paired with inverted foreground colors.
80
+ @dt-color-surface-info: #EAF2FA; // Background surface color containing messaging or elements communicated as generally informational.
81
+ @dt-color-surface-info-subtle: #f5f9fd; // A softer version of the default informational surface.
70
82
  @dt-color-surface-info-strong: #1768C6; // A contrasting informational surface, most likely paired with inverted foreground colors.
71
- @dt-color-surface-brand-strong: #7C52FF; // A contrasting informational surface, most likely paired with inverted foreground colors.
72
- @dt-color-surface-primary-opaque: hsl(0 0% 100% / 0.96); // Primary surface as opaque background color.
73
- @dt-color-surface-secondary-opaque: hsl(0 0% 11% / 0.02); // Secondary surface as opaque background color.
74
- @dt-color-surface-moderate-opaque: hsl(0 0% 11% / 0.1); // Moderate surface as opaque background color.
75
- @dt-color-surface-bold-opaque: hsl(0 0% 11% / 0.19); // Bold surface as opaque background color.
76
- @dt-color-surface-strong-opaque: hsl(0 0% 11% / 0.76); // Strong surface as opaque background color.
77
- @dt-color-surface-contrast-opaque: hsl(0 0% 11% / 0.94); // Contrast surface as opaque background color.
78
- @dt-color-surface-critical-opaque: hsl(4.62 100% 82.2% / 0.31); // Critical surface as opaque background color.
79
- @dt-color-surface-warning-opaque: hsl(46.1 100% 80.6% / 0.5); // Warning surface as opaque background color
80
- @dt-color-surface-success-opaque: hsl(85.1 100% 83.1% / 0.25); // Success surface as opaque background color.
81
- @dt-color-surface-info-opaque: hsl(201 100% 87.1% / 0.35); // Info surface as opaque background color.
82
- @dt-color-surface-brand-opaque: hsl(260 100% 89% / 0.27); // Info surface as opaque background color.
83
- @dt-color-surface-critical-subtle-opaque: hsl(358 100% 94.9% / 0.5); // Critical subtle surface as opaque background color.
84
- @dt-color-surface-warning-subtle-opaque: hsl(47.1 100% 90% / 0.5); // Warning subtle surface as opaque background color
85
- @dt-color-surface-success-subtle-opaque: hsl(111 53.8% 94.9% / 0.5); // Success subtle surface as opaque background color.
86
- @dt-color-surface-info-subtle-opaque: hsl(210 61.5% 94.9% / 0.5); // Info surface as opaque background color.
87
- @dt-color-surface-brand-subtle-opaque: hsl(260 100% 89% / 0.2); // Info surface as opaque background color.
88
- @dt-color-surface-primary-inverted: #000000; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
89
83
  @dt-color-surface-secondary-inverted: #252525; // For adjacent or complementary regions.
90
84
  @dt-color-surface-moderate-inverted: #3A3A3A; // A tertiary surface level, prominent without being too overpowering.
91
85
  @dt-color-surface-bold-inverted: #535353; // Highlight or call attention to specific areas of the interface.
92
86
  @dt-color-surface-strong-inverted: #AAAAAA; // Use sparingly to draw the eye to a relatively important region.
93
87
  @dt-color-surface-contrast-inverted: #F9F9F9; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
88
+ @dt-color-surface-primary-inverted: #000000; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
94
89
  @dt-color-surface-critical-inverted: #380010; // Background surface color containing error, danger, or otherwise critical messaging or elements.
90
+ @dt-color-surface-critical-subtle-inverted: #1C0108; // A softer version of the Critical surface.
91
+ @dt-color-surface-critical-strong-inverted: #FF716F; // A contrasting critical surface, most likely paired with inverted foreground colors.
95
92
  @dt-color-surface-warning-inverted: #2C1B02; // Background surface color highlighting messaging or elements that may require user's attention.
93
+ @dt-color-surface-warning-subtle-inverted: #201301; // A softer version of the default warning surface.
94
+ @dt-color-surface-warning-strong-inverted: #FFDB80; // A contrasting warning surface, most likely paired with inverted foreground colors.
96
95
  @dt-color-surface-success-inverted: #012717; // Background surface color containing messaging or elements expressing a positive or successful state.
96
+ @dt-color-surface-success-subtle-inverted: #00150D; // A softer version of the default success surface.
97
+ @dt-color-surface-success-strong-inverted: #AEFB3C; // A contrasting positive state surface, most likely paired with inverted foreground colors.
97
98
  @dt-color-surface-info-inverted: #001429; // Background surface color containing messaging or elements communicated as generally informational.
99
+ @dt-color-surface-brand: #F5F0FF; // Background surface color containing messaging or elements communicated as generally informational.
98
100
  @dt-color-surface-brand-inverted: #1D0155; // Background surface color containing messaging or elements communicated as generally informational.
99
- @dt-color-surface-critical-subtle-inverted: #1C0108; // A softer version of the Critical surface.
100
- @dt-color-surface-warning-subtle-inverted: #201301; // A softer version of the default warning surface.
101
- @dt-color-surface-success-subtle-inverted: #00150D; // A softer version of the default success surface.
102
101
  @dt-color-surface-info-subtle-inverted: #010B16; // A softer version of the default informational surface.
102
+ @dt-color-surface-brand-subtle: #f9f6ff; // A softer version of the default informational surface.
103
103
  @dt-color-surface-brand-subtle-inverted: #0E002A; // A softer version of the default informational surface.
104
- @dt-color-surface-critical-strong-inverted: #FF716F; // A contrasting critical surface, most likely paired with inverted foreground colors.
105
- @dt-color-surface-warning-strong-inverted: #FFDB80; // A contrasting warning surface, most likely paired with inverted foreground colors.
106
- @dt-color-surface-success-strong-inverted: #AEFB3C; // A contrasting positive state surface, most likely paired with inverted foreground colors.
107
104
  @dt-color-surface-info-strong-inverted: #4AA9EA; // A contrasting informational surface, most likely paired with inverted foreground colors.
105
+ @dt-color-surface-brand-strong: #7C52FF; // A contrasting informational surface, most likely paired with inverted foreground colors.
108
106
  @dt-color-surface-brand-strong-inverted: #AB7EFF; // A contrasting informational surface, most likely paired with inverted foreground colors.
109
- @dt-color-surface-primary-opaque-inverted: hsl(0 0% 0% / 0.85); // Secondary surface as opaque background color.
107
+ @dt-color-surface-primary-opaque: hsl(0 0% 0% / 0.2); // Primary surface as opaque background color.
110
108
  @dt-color-surface-secondary-opaque-inverted: hsl(0 0% 100% / 0.15); // Secondary surface as opaque background color.
111
109
  @dt-color-surface-moderate-opaque-inverted: hsl(0 0% 100% / 0.23); // Moderate surface as opaque background color.
112
110
  @dt-color-surface-bold-opaque-inverted: hsl(0 0% 100% / 0.32); // Bold surface as opaque background color.
113
111
  @dt-color-surface-strong-opaque-inverted: hsl(0 0% 100% / 0.67); // Strong surface as opaque background color.
114
112
  @dt-color-surface-contrast-opaque-inverted: hsl(0 0% 100% / 0.97); // Contrast surface as opaque background color.
115
113
  @dt-color-surface-critical-opaque-inverted: hsl(342 85.2% 21.2% / 0.5); // Critical surface as opaque background color.
114
+ @dt-color-surface-critical-subtle-opaque-inverted: hsl(344 93.1% 5.69% / 0.6); // Critical subtle surface as opaque background color.
116
115
  @dt-color-surface-warning-opaque-inverted: hsl(34.9 90.8% 17.1% / 0.35); // Warning surface as opaque background color
116
+ @dt-color-surface-warning-subtle-opaque-inverted: hsl(34.8 93.9% 6.47% / 0.7); // Warning subtle surface as opaque background color
117
117
  @dt-color-surface-success-opaque-inverted: hsl(155 100% 15.5% / 0.3); // Success surface as opaque background color.
118
+ @dt-color-surface-success-subtle-opaque-inverted: hsl(157 100% 4.12% / 0.66); // Success subtle surface as opaque background color.
118
119
  @dt-color-surface-info-opaque-inverted: hsl(211 100% 8.04% / 0.6); // Info surface as opaque background color.
120
+ @dt-color-surface-brand-opaque: hsl(260 100% 89% / 0.27); // Info surface as opaque background color.
119
121
  @dt-color-surface-brand-opaque-inverted: hsl(260 97.7% 16.9% / 0.8); // Info surface as opaque background color.
120
- @dt-color-surface-critical-subtle-opaque-inverted: hsl(344 93.1% 5.69% / 0.6); // Critical subtle surface as opaque background color.
121
- @dt-color-surface-warning-subtle-opaque-inverted: hsl(34.8 93.9% 6.47% / 0.7); // Warning subtle surface as opaque background color
122
- @dt-color-surface-success-subtle-opaque-inverted: hsl(157 100% 4.12% / 0.66); // Success subtle surface as opaque background color.
123
122
  @dt-color-surface-info-subtle-opaque-inverted: hsl(211 91.3% 4.51% / 0.66); // Info surface as opaque background color.
123
+ @dt-color-surface-brand-subtle-opaque: hsl(260 100% 89% / 0.2); // Info surface as opaque background color.
124
124
  @dt-color-surface-brand-subtle-opaque-inverted: hsl(260 100% 8.24% / 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% 11% / 0.11);
127
126
  @dt-color-border-default: hsl(0 0% 11% / 0.17);
128
127
  @dt-color-border-moderate: hsl(0 0% 11% / 0.25);
129
128
  @dt-color-border-bold: hsl(0 0% 11% / 0.5);
129
+ @dt-color-border-subtle-inverted: hsl(0 0% 100% / 0.12);
130
+ @dt-color-border-default-inverted: hsl(0 0% 100% / 0.2);
131
+ @dt-color-border-moderate-inverted: hsl(0 0% 100% / 0.35);
132
+ @dt-color-border-bold-inverted: hsl(0 0% 100% / 0.5);
133
+ @dt-color-border-focus: #2C83D5;
130
134
  @dt-color-border-critical: #FF1356;
131
135
  @dt-color-border-success: #2EA834;
132
136
  @dt-color-border-warning: #FF9E0E;
133
- @dt-color-border-brand: #ff0000;
137
+ @dt-color-border-brand: #7C52FF;
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: #FF716F;
135
- @dt-color-border-success-subtle: #D1FF76;
136
- @dt-color-border-warning-subtle: #FFDB80;
137
- @dt-color-border-brand-subtle: #C2A3FF;
138
141
  @dt-color-border-critical-strong: #93173A;
142
+ @dt-color-border-success-subtle: #D1FF76;
139
143
  @dt-color-border-success-strong: #004F2E;
144
+ @dt-color-border-warning-subtle: #FFDB80;
140
145
  @dt-color-border-warning-strong: #D57F00;
146
+ @dt-color-border-brand-subtle: #C2A3FF;
141
147
  @dt-color-border-brand-strong: #5023DD;
142
- @dt-color-border-subtle-inverted: hsl(0 0% 100% / 0.12);
143
- @dt-color-border-default-inverted: hsl(0 0% 100% / 0.2);
144
- @dt-color-border-moderate-inverted: hsl(0 0% 100% / 0.35);
145
- @dt-color-border-bold-inverted: hsl(0 0% 100% / 0.5);
146
148
  @dt-color-border-critical-inverted: #FF716F;
147
149
  @dt-color-border-success-inverted: #52C926;
148
150
  @dt-color-border-warning-inverted: #EA8F07;
149
151
  @dt-color-border-brand-inverted: #AB7EFF;
150
152
  @dt-color-border-critical-subtle-inverted: #640823;
151
- @dt-color-border-success-subtle-inverted: #004F2E;
152
- @dt-color-border-warning-subtle-inverted: #815008;
153
- @dt-color-border-brand-subtle-inverted: #7C52FF;
154
153
  @dt-color-border-critical-strong-inverted: #FFABA4;
154
+ @dt-color-border-success-subtle-inverted: #004F2E;
155
155
  @dt-color-border-success-strong-inverted: #84EE0B;
156
+ @dt-color-border-warning-subtle-inverted: #815008;
156
157
  @dt-color-border-warning-strong-inverted: #FFDB80;
158
+ @dt-color-border-brand-subtle-inverted: #7C52FF;
157
159
  @dt-color-border-brand-strong-inverted: #DAC7FF;
158
- @dt-color-border-focus: #2C83D5;
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.
@@ -402,8 +401,8 @@
402
401
  @dt-action-color-foreground-inverted-primary-hover: #5023DD;
403
402
  @dt-action-color-foreground-inverted-primary-active: #5023DD;
404
403
  @dt-action-color-foreground-muted-default: #3A3A3A;
405
- @dt-action-color-foreground-muted-hover: #ff0000;
406
- @dt-action-color-foreground-muted-active: #ff0000;
404
+ @dt-action-color-foreground-muted-hover: #1C1C1C;
405
+ @dt-action-color-foreground-muted-active: #1C1C1C;
407
406
  @dt-action-color-foreground-disabled-default: #808080;
408
407
  @dt-action-color-foreground-positive-default: #008E52;
409
408
  @dt-action-color-foreground-positive-hover: #004F2E;
@@ -437,41 +436,41 @@
437
436
  @dt-action-color-background-positive-primary-default: #2EA834; // Postive, accepting, or success actions.
438
437
  @dt-action-color-background-positive-primary-hover: #008E52;
439
438
  @dt-action-color-background-positive-primary-active: hsl(155 100% 24.8%);
440
- @dt-action-color-border-base-outlined-default: #ff0000;
439
+ @dt-action-color-border-base-outlined-default: #7C52FF;
441
440
  @dt-action-color-border-critical-outlined-default: #FF1356;
442
441
  @dt-action-color-border-inverted-outlined-default: hsl(0 0% 100% / 0.2);
443
442
  @dt-action-color-border-muted-outlined-default: hsl(0 0% 11% / 0.17);
444
- @dt-theme-color-base: #ff0000;
445
- @dt-theme-topbar-color-foreground: hsl(0 100% 50% / 0.8);
443
+ @dt-theme-color-base: #1C1C1C;
444
+ @dt-theme-topbar-color-foreground: hsl(0 0% 11% / 0.8);
446
445
  @dt-theme-topbar-color-background: #F9F9F9;
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% 11% / 0.5);
447
+ @dt-theme-topbar-field-color-foreground-hover: hsl(0 0% 11% / 0.75);
448
+ @dt-theme-topbar-field-color-background: hsl(0 0% 11% / 0.05);
450
449
  @dt-theme-topbar-field-color-background-hover: hsl(0 0% 100%);
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.05);
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);
450
+ @dt-theme-topbar-field-color-border: hsl(0 0% 11% / 0);
451
+ @dt-theme-topbar-field-color-border-hover: hsl(0 0% 11% / 0.1);
452
+ @dt-theme-topbar-field-color-border-active: hsl(0 0% 11% / 0.2);
453
+ @dt-theme-topbar-button-color-foreground: hsl(0 0% 11% / 0.65);
454
+ @dt-theme-topbar-button-color-foreground-hover: #1C1C1C;
455
+ @dt-theme-topbar-button-color-background: hsl(0 0% 11% / 0);
456
+ @dt-theme-topbar-button-color-background-hover: hsl(0 0% 11% / 0.05);
457
+ @dt-theme-topbar-button-color-background-active: hsl(0 0% 11% / 0.1);
458
+ @dt-theme-topbar-profile-color-foreground: hsl(0 0% 11% / 0.8);
460
459
  @dt-theme-topbar-profile-color-foreground-inverted: hsl(0 0% 97.6% / 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);
460
+ @dt-theme-topbar-profile-color-background: hsl(0 0% 11% / 0.05);
461
+ @dt-theme-topbar-profile-color-background-inverted: hsl(0 0% 11% / 0.75);
462
+ @dt-theme-topbar-profile-color-background-hover: hsl(0 0% 11% / 0.1);
463
+ @dt-theme-topbar-profile-color-background-active: hsl(0 0% 11% / 0.14);
465
464
  @dt-theme-sidebar-color-foreground: #3A3A3A;
466
- @dt-theme-sidebar-color-foreground-unread: #ff0000;
465
+ @dt-theme-sidebar-color-foreground-unread: #1C1C1C;
467
466
  @dt-theme-sidebar-color-background: #F9F9F9;
468
467
  @dt-theme-sidebar-icon-color-foreground: #3A3A3A;
469
468
  @dt-theme-sidebar-status-color-foreground: #535353;
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.11);
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.09);
469
+ @dt-theme-sidebar-row-color-background: hsl(0 0% 11% / 0);
470
+ @dt-theme-sidebar-row-color-background-hover: hsl(0 0% 11% / 0.11);
471
+ @dt-theme-sidebar-row-color-background-active: hsl(0 0% 11% / 0.15);
472
+ @dt-theme-sidebar-selected-row-color-foreground: #1C1C1C;
473
+ @dt-theme-sidebar-selected-row-color-background: hsl(0 0% 11% / 0.09);
475
474
  @dt-theme-sidebar-section-color-foreground: #535353;
476
475
  @dt-theme-presence-color-background-available: #52C926;
477
476
  @dt-theme-presence-color-background-busy-unavailable: #FF1356;
@@ -508,21 +507,21 @@
508
507
  @dt-badge-color-background-critical: #FFABA4;
509
508
  @dt-badge-color-background-bulletin: #7C52FF;
510
509
  @dt-badge-color-background-bulletin-subtle: #DAC7FF;
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: #000000;
513
512
  @dt-badge-color-foreground-bulletin: #ffffff;
514
513
  @dt-badge-color-foreground-bulletin-subtle: #3A1D95;
515
514
  @dt-badge-color-foreground-ai: #ffffff;
516
515
  @dt-badge-color-border-default: hsl(0 0% 11% / 0.11);
517
- @dt-badge-color-border-bulletin-subtle: hsl(0 100% 50% / 0.5);
516
+ @dt-badge-color-border-bulletin-subtle: hsl(255 100% 66.1% / 0.5);
518
517
  @dt-button-font-size-xs: 12px; // Extra small Button text size
519
518
  @dt-button-font-size-sm: 12px; // Small Button text size
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
@@ -539,7 +538,7 @@
539
538
  @dt-checkbox-size-height: 1.6rem;
540
539
  @dt-checkbox-size-radius: 0.4rem;
541
540
  @dt-checkbox-color-border-unchecked: hsl(0 0% 11% / 0.25);
542
- @dt-checkbox-color-border-checked: #ff0000;
541
+ @dt-checkbox-color-border-checked: #7C52FF;
543
542
  @dt-checkbox-color-background-checked: #7C52FF;
544
543
  @dt-checkbox-color-foreground-default: transparent;
545
544
  @dt-checkbox-color-foreground-checked: #F9F9F9;
@@ -563,7 +562,7 @@
563
562
  @dt-radio-size-height: 1.6rem;
564
563
  @dt-radio-size-radius: 50%;
565
564
  @dt-radio-color-border-unchecked: hsl(0 0% 11% / 0.25);
566
- @dt-radio-color-border-checked: #ff0000;
565
+ @dt-radio-color-border-checked: #7C52FF;
567
566
  @dt-radio-color-background-checked: #7C52FF;
568
567
  @dt-radio-color-foreground-default: transparent;
569
568
  @dt-radio-color-foreground-checked: #F9F9F9;