@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
@@ -2,13 +2,13 @@
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: #1C1C1C; // Default text color throughout the UI.
5
+ @dt-color-foreground-primary: #ff0000;
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);
9
9
  @dt-color-foreground-placeholder: #808080; // Text color for placeholder text within form elements.
10
10
  @dt-color-foreground-disabled: #808080; // Used for text paired with disabled content or components, like the form elements.
11
- @dt-color-foreground-critical: #E10040; // Expresses an error, danger, or otherwise critical state.
11
+ @dt-color-foreground-critical: #FF1356; // Expresses an error, danger, or otherwise critical state.
12
12
  @dt-color-foreground-critical-strong: #AF0032; // Expresses an error, danger, or otherwise critical state on surfaces that require a stronger contrast.
13
13
  @dt-color-foreground-success: #008E52; // Indicates a positive state.
14
14
  @dt-color-foreground-success-strong: #004F2E; // Indicates a strong positive state on surfaces that require a stronger contrast.
@@ -22,46 +22,32 @@
22
22
  @dt-color-foreground-critical-inverted: #FF716F; // Critical text that sits on high-contrast surfaces or backgrounds
23
23
  @dt-color-foreground-critical-strong-inverted: #FFABA4; // 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
- @dt-color-foreground-success-strong-inverted: #D1FF76; // Success strong text that sits on high-contrast surfaces or backgrounds
26
- @dt-color-foreground-warning-inverted: #FFC047; // Warning text that sits on high-contrast surfaces or backgrounds
25
+ @dt-color-foreground-success-strong-inverted: #DBFFA9; // Success strong text that sits on high-contrast surfaces or backgrounds
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-critical: #E10040;
29
- @dt-color-link-success: #008E52; // positive
30
- @dt-color-link-warning: #815008;
31
- @dt-color-link-muted: #3A3A3A;
32
- @dt-color-link-disabled: #808080;
33
- @dt-color-link-primary-inverted: #AB7EFF;
34
- @dt-color-link-critical-inverted: #FF716F;
35
- @dt-color-link-success-inverted: #AEFB3C;
36
- @dt-color-link-warning-inverted: #FFC047;
37
- @dt-color-link-muted-inverted: #E9E9E9;
38
- @dt-color-link-disabled-inverted: #AAAAAA;
39
28
  @dt-color-link-primary-hover: #5023DD;
29
+ @dt-color-link-critical: #FF1356;
40
30
  @dt-color-link-critical-hover: #AF0032;
31
+ @dt-color-link-success: #008E52; // positive
41
32
  @dt-color-link-success-hover: #004F2E;
33
+ @dt-color-link-warning: #815008;
42
34
  @dt-color-link-warning-hover: #533204;
43
- @dt-color-link-muted-hover: #1C1C1C;
35
+ @dt-color-link-muted: #3A3A3A;
36
+ @dt-color-link-muted-hover: #ff0000;
37
+ @dt-color-link-disabled: #808080;
44
38
  @dt-color-link-disabled-hover: #808080;
39
+ @dt-color-link-primary-inverted: #C2A3FF;
45
40
  @dt-color-link-primary-inverted-hover: #DAC7FF;
41
+ @dt-color-link-critical-inverted: #FF716F;
46
42
  @dt-color-link-critical-inverted-hover: #FFABA4;
47
- @dt-color-link-success-inverted-hover: #D1FF76;
48
- @dt-color-link-warning-inverted-hover: #FFE89C;
43
+ @dt-color-link-success-inverted: #AEFB3C;
44
+ @dt-color-link-success-inverted-hover: #DBFFA9;
45
+ @dt-color-link-warning-inverted: #FF9E0E;
46
+ @dt-color-link-warning-inverted-hover: #FFDB80;
47
+ @dt-color-link-muted-inverted: #E9E9E9;
49
48
  @dt-color-link-muted-inverted-hover: #F9F9F9;
49
+ @dt-color-link-disabled-inverted: #AAAAAA;
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(4.62 100% 82.2% / 0.15); // 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.
65
51
  @dt-color-surface-primary: #ffffff; // Default surface color for the majority of surfaces.
66
52
  @dt-color-surface-secondary: #F9F9F9; // For adjacent or complementary regions.
67
53
  @dt-color-surface-moderate: #E9E9E9; // A tertiary surface level, prominent without being too overpowering.
@@ -69,57 +55,109 @@
69
55
  @dt-color-surface-strong: #535353; // Use sparingly to draw the eye to a relatively important region.
70
56
  @dt-color-surface-contrast: #252525; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
71
57
  @dt-color-surface-critical: #FFE5E6; // Background surface color containing error, danger, or otherwise critical messaging or elements.
72
- @dt-color-surface-critical-subtle: hsl(358 100% 97.5%); // A softer version of the Critical surface.
73
- @dt-color-surface-critical-strong: #AF0032; // A contrasting critical surface, most likely paired with inverted foreground colors.
74
58
  @dt-color-surface-warning: #FFF4CC; // Background surface color highlighting messaging or elements that may require user's attention.
75
- @dt-color-surface-warning-subtle: hsl(47.1 100% 95%); // A softer version of the default warning surface.
76
- @dt-color-surface-warning-strong: #FFDB80; // A contrasting warning surface, most likely paired with inverted foreground colors.
77
59
  @dt-color-surface-success: #EDF9EB; // Background surface color containing messaging or elements expressing a positive or successful state.
78
- @dt-color-surface-success-subtle: hsl(111 53.8% 97.5%); // A softer version of the default success surface.
79
- @dt-color-surface-success-strong: #008E52; // A contrasting positive state surface, most likely paired with inverted foreground colors.
80
60
  @dt-color-surface-info: #EAF2FA; // Background surface color containing messaging or elements communicated as generally informational.
81
- @dt-color-surface-info-subtle: hsl(210 61.5% 97.5%); // A softer version of the default informational surface.
82
- @dt-color-surface-info-strong: #1768C6; // A contrasting informational surface, most likely paired with inverted foreground colors.
83
61
  @dt-color-surface-brand: #F5F0FF; // Background surface color containing messaging or elements communicated as generally informational.
84
- @dt-color-surface-brand-subtle: hsl(260 100% 98.2%); // A softer version of the default informational surface.
62
+ @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
+ @dt-color-surface-critical-strong: #D90A45; // A contrasting critical surface, most likely paired with inverted foreground colors.
68
+ @dt-color-surface-warning-strong: #FFBD48; // A contrasting warning surface, most likely paired with inverted foreground colors.
69
+ @dt-color-surface-success-strong: #008E52; // A contrasting positive state surface, most likely paired with inverted foreground colors.
70
+ @dt-color-surface-info-strong: #1768C6; // A contrasting informational surface, most likely paired with inverted foreground colors.
85
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.
86
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
87
  @dt-color-surface-brand-subtle-opaque: hsl(260 100% 89% / 0.2); // Info surface as opaque background color.
88
- @dt-color-border-subtle: hsl(0 0% 11% / 0.1);
89
- @dt-color-border-default: hsl(0 0% 11% / 0.15);
88
+ @dt-color-surface-primary-inverted: #000000; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
89
+ @dt-color-surface-secondary-inverted: #252525; // For adjacent or complementary regions.
90
+ @dt-color-surface-moderate-inverted: #3A3A3A; // A tertiary surface level, prominent without being too overpowering.
91
+ @dt-color-surface-bold-inverted: #535353; // Highlight or call attention to specific areas of the interface.
92
+ @dt-color-surface-strong-inverted: #AAAAAA; // Use sparingly to draw the eye to a relatively important region.
93
+ @dt-color-surface-contrast-inverted: #F9F9F9; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
94
+ @dt-color-surface-critical-inverted: #380010; // Background surface color containing error, danger, or otherwise critical messaging or elements.
95
+ @dt-color-surface-warning-inverted: #2C1B02; // Background surface color highlighting messaging or elements that may require user's attention.
96
+ @dt-color-surface-success-inverted: #012717; // Background surface color containing messaging or elements expressing a positive or successful state.
97
+ @dt-color-surface-info-inverted: #001429; // Background surface color containing messaging or elements communicated as generally informational.
98
+ @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
+ @dt-color-surface-info-subtle-inverted: #010B16; // A softer version of the default informational surface.
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
+ @dt-color-surface-info-strong-inverted: #4AA9EA; // A contrasting informational surface, most likely paired with inverted foreground colors.
108
+ @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.
110
+ @dt-color-surface-secondary-opaque-inverted: hsl(0 0% 100% / 0.15); // Secondary surface as opaque background color.
111
+ @dt-color-surface-moderate-opaque-inverted: hsl(0 0% 100% / 0.23); // Moderate surface as opaque background color.
112
+ @dt-color-surface-bold-opaque-inverted: hsl(0 0% 100% / 0.32); // Bold surface as opaque background color.
113
+ @dt-color-surface-strong-opaque-inverted: hsl(0 0% 100% / 0.67); // Strong surface as opaque background color.
114
+ @dt-color-surface-contrast-opaque-inverted: hsl(0 0% 100% / 0.97); // Contrast surface as opaque background color.
115
+ @dt-color-surface-critical-opaque-inverted: hsl(342 85.2% 21.2% / 0.5); // Critical surface as opaque background color.
116
+ @dt-color-surface-warning-opaque-inverted: hsl(34.9 90.8% 17.1% / 0.35); // Warning surface as opaque background color
117
+ @dt-color-surface-success-opaque-inverted: hsl(155 100% 15.5% / 0.3); // Success surface as opaque background color.
118
+ @dt-color-surface-info-opaque-inverted: hsl(211 100% 8.04% / 0.6); // Info surface as opaque background color.
119
+ @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
+ @dt-color-surface-info-subtle-opaque-inverted: hsl(211 91.3% 4.51% / 0.66); // Info surface as opaque background color.
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
+ @dt-color-border-subtle: hsl(0 0% 11% / 0.11);
127
+ @dt-color-border-default: hsl(0 0% 11% / 0.17);
90
128
  @dt-color-border-moderate: hsl(0 0% 11% / 0.25);
91
129
  @dt-color-border-bold: hsl(0 0% 11% / 0.5);
130
+ @dt-color-border-critical: #FF1356;
131
+ @dt-color-border-success: #2EA834;
132
+ @dt-color-border-warning: #FF9E0E;
133
+ @dt-color-border-brand: #ff0000;
134
+ @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
+ @dt-color-border-critical-strong: #93173A;
139
+ @dt-color-border-success-strong: #004F2E;
140
+ @dt-color-border-warning-strong: #D57F00;
141
+ @dt-color-border-brand-strong: #5023DD;
92
142
  @dt-color-border-subtle-inverted: hsl(0 0% 100% / 0.12);
93
143
  @dt-color-border-default-inverted: hsl(0 0% 100% / 0.2);
94
144
  @dt-color-border-moderate-inverted: hsl(0 0% 100% / 0.35);
95
145
  @dt-color-border-bold-inverted: hsl(0 0% 100% / 0.5);
96
- @dt-color-border-focus: #3CA8F3;
97
- @dt-color-border-critical: #FF1356;
98
- @dt-color-border-success: #008E52;
99
- @dt-color-border-warning: #F19000;
100
- @dt-color-border-brand: #7C52FF;
101
- @dt-color-border-ai: linear-gradient(135deg, #FF1BA4 10%, #7C52FF 90%);
102
- @dt-color-border-accent: #FF1BA4;
103
- @dt-color-border-critical-subtle: #FF716F;
104
- @dt-color-border-critical-strong: #AF0032;
105
- @dt-color-border-success-subtle: #AEFB3C;
106
- @dt-color-border-success-strong: #004F2E;
107
- @dt-color-border-warning-subtle: #FFC047;
108
- @dt-color-border-warning-strong: #815008;
109
- @dt-color-border-brand-subtle: #AB7EFF;
110
- @dt-color-border-brand-strong: #3A1D95;
111
146
  @dt-color-border-critical-inverted: #FF716F;
112
- @dt-color-border-success-inverted: #3CD707;
113
- @dt-color-border-warning-inverted: #FFC047;
114
- @dt-color-border-brand-inverted: #7C52FF;
115
- @dt-color-border-critical-subtle-inverted: #AF0032;
147
+ @dt-color-border-success-inverted: #52C926;
148
+ @dt-color-border-warning-inverted: #EA8F07;
149
+ @dt-color-border-brand-inverted: #AB7EFF;
150
+ @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;
116
154
  @dt-color-border-critical-strong-inverted: #FFABA4;
117
- @dt-color-border-success-subtle-inverted: #008E52;
118
- @dt-color-border-success-strong-inverted: #D1FF76;
119
- @dt-color-border-warning-subtle-inverted: #D57F00;
120
- @dt-color-border-warning-strong-inverted: #FFE89C;
121
- @dt-color-border-brand-subtle-inverted: #5023DD;
122
- @dt-color-border-brand-strong-inverted: #AB7EFF;
155
+ @dt-color-border-success-strong-inverted: #84EE0B;
156
+ @dt-color-border-warning-strong-inverted: #FFDB80;
157
+ @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;
123
161
  @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.
124
162
  @dt-typography-body-md-font-weight: 400; // Base default medium text style for main content.
125
163
  @dt-typography-body-md-line-height: 1.6; // Base default medium text style for main content.
@@ -340,11 +378,11 @@
340
378
  @dt-inputs-color-foreground-default: #3A3A3A;
341
379
  @dt-inputs-color-foreground-placeholder: #808080;
342
380
  @dt-inputs-color-foreground-disabled: #808080;
343
- @dt-inputs-color-border-default: hsl(0 0% 11% / 0.15);
344
- @dt-inputs-color-border-focus: #3CA8F3;
381
+ @dt-inputs-color-border-default: hsl(0 0% 11% / 0.17);
382
+ @dt-inputs-color-border-focus: #2C83D5;
345
383
  @dt-inputs-color-border-critical: #FF1356;
346
- @dt-inputs-color-border-success: #008E52;
347
- @dt-inputs-color-border-warning: #F19000;
384
+ @dt-inputs-color-border-success: #2EA834;
385
+ @dt-inputs-color-border-warning: #FF9E0E;
348
386
  @dt-inputs-color-border-disabled: transparent;
349
387
  @dt-inputs-color-background-default: hsl(0 0% 11% / 0.02);
350
388
  @dt-inputs-color-background-focus: #F9F9F9;
@@ -353,7 +391,7 @@
353
391
  @dt-action-color-foreground-base-hover: #5023DD;
354
392
  @dt-action-color-foreground-base-active: #5023DD;
355
393
  @dt-action-color-foreground-base-primary-default: #ffffff;
356
- @dt-action-color-foreground-critical-default: #E10040;
394
+ @dt-action-color-foreground-critical-default: #FF1356;
357
395
  @dt-action-color-foreground-critical-hover: #AF0032;
358
396
  @dt-action-color-foreground-critical-active: #AF0032;
359
397
  @dt-action-color-foreground-critical-primary-default: #ffffff;
@@ -364,8 +402,8 @@
364
402
  @dt-action-color-foreground-inverted-primary-hover: #5023DD;
365
403
  @dt-action-color-foreground-inverted-primary-active: #5023DD;
366
404
  @dt-action-color-foreground-muted-default: #3A3A3A;
367
- @dt-action-color-foreground-muted-hover: #1C1C1C;
368
- @dt-action-color-foreground-muted-active: #1C1C1C;
405
+ @dt-action-color-foreground-muted-hover: #ff0000;
406
+ @dt-action-color-foreground-muted-active: #ff0000;
369
407
  @dt-action-color-foreground-disabled-default: #808080;
370
408
  @dt-action-color-foreground-positive-default: #008E52;
371
409
  @dt-action-color-foreground-positive-hover: #004F2E;
@@ -373,15 +411,15 @@
373
411
  @dt-action-color-foreground-positive-primary-default: #ffffff;
374
412
  @dt-action-color-background-base-default: transparent;
375
413
  @dt-action-color-background-base-hover: hsl(260 100% 89% / 0.27);
376
- @dt-action-color-background-base-active: #DAC7FF;
414
+ @dt-action-color-background-base-active: hsl(260 100% 79.2% / 0.27);
377
415
  @dt-action-color-background-base-primary-default: #7C52FF;
378
416
  @dt-action-color-background-base-primary-hover: #6538F1;
379
417
  @dt-action-color-background-base-primary-active: #5023DD;
380
418
  @dt-action-color-background-critical-default: transparent;
381
419
  @dt-action-color-background-critical-hover: hsl(4.62 100% 82.2% / 0.31);
382
- @dt-action-color-background-critical-active: #FFABA4;
420
+ @dt-action-color-background-critical-active: hsl(4.62 100% 73.2% / 0.31);
383
421
  @dt-action-color-background-critical-primary-default: #FF1356;
384
- @dt-action-color-background-critical-primary-hover: #E10040;
422
+ @dt-action-color-background-critical-primary-hover: #D90A45;
385
423
  @dt-action-color-background-critical-primary-active: #AF0032;
386
424
  @dt-action-color-background-inverted-default: transparent;
387
425
  @dt-action-color-background-inverted-hover: #535353;
@@ -391,51 +429,51 @@
391
429
  @dt-action-color-background-inverted-primary-active: #DAC7FF;
392
430
  @dt-action-color-background-muted-default: transparent;
393
431
  @dt-action-color-background-muted-hover: hsl(0 0% 11% / 0.1);
394
- @dt-action-color-background-muted-active: hsl(0 0% 11% / 0.19);
432
+ @dt-action-color-background-muted-active: hsl(0 0% 11% / 0.14);
395
433
  @dt-action-color-background-disabled-default: hsl(0 0% 11% / 0.19);
396
434
  @dt-action-color-background-positive-default: transparent;
397
435
  @dt-action-color-background-positive-hover: hsl(85.1 100% 83.1% / 0.25);
398
- @dt-action-color-background-positive-active: #DBFFA9;
399
- @dt-action-color-background-positive-primary-default: #04BF08; // Postive, accepting, or success actions.
436
+ @dt-action-color-background-positive-active: hsl(85.1 100% 58.2% / 0.25);
437
+ @dt-action-color-background-positive-primary-default: #2EA834; // Postive, accepting, or success actions.
400
438
  @dt-action-color-background-positive-primary-hover: #008E52;
401
- @dt-action-color-background-positive-primary-active: #004F2E;
402
- @dt-action-color-border-base-outlined-default: #7C52FF;
439
+ @dt-action-color-background-positive-primary-active: hsl(155 100% 24.8%);
440
+ @dt-action-color-border-base-outlined-default: #ff0000;
403
441
  @dt-action-color-border-critical-outlined-default: #FF1356;
404
442
  @dt-action-color-border-inverted-outlined-default: hsl(0 0% 100% / 0.2);
405
- @dt-action-color-border-muted-outlined-default: hsl(0 0% 11% / 0.15);
406
- @dt-theme-color-base: #1C1C1C;
407
- @dt-theme-topbar-color-foreground: hsl(0 0% 11% / 0.8);
443
+ @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);
408
446
  @dt-theme-topbar-color-background: #F9F9F9;
409
- @dt-theme-topbar-field-color-foreground: hsl(0 0% 11% / 0.5);
410
- @dt-theme-topbar-field-color-foreground-hover: hsl(0 0% 11% / 0.75);
411
- @dt-theme-topbar-field-color-background: hsl(0 0% 11% / 0.05);
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);
412
450
  @dt-theme-topbar-field-color-background-hover: hsl(0 0% 100%);
413
- @dt-theme-topbar-field-color-border: hsl(0 0% 11% / 0);
414
- @dt-theme-topbar-field-color-border-hover: hsl(0 0% 11% / 0.1);
415
- @dt-theme-topbar-field-color-border-active: hsl(0 0% 11% / 0.2);
416
- @dt-theme-topbar-button-color-foreground: hsl(0 0% 11% / 0.65);
417
- @dt-theme-topbar-button-color-foreground-hover: #1C1C1C;
418
- @dt-theme-topbar-button-color-background: hsl(0 0% 11% / 0);
419
- @dt-theme-topbar-button-color-background-hover: hsl(0 0% 11% / 0.05);
420
- @dt-theme-topbar-button-color-background-active: hsl(0 0% 11% / 0.1);
421
- @dt-theme-topbar-profile-color-foreground: hsl(0 0% 11% / 0.8);
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);
422
460
  @dt-theme-topbar-profile-color-foreground-inverted: hsl(0 0% 97.6% / 0.75);
423
- @dt-theme-topbar-profile-color-background: hsl(0 0% 11% / 0.05);
424
- @dt-theme-topbar-profile-color-background-inverted: hsl(0 0% 11% / 0.75);
425
- @dt-theme-topbar-profile-color-background-hover: hsl(0 0% 11% / 0.1);
426
- @dt-theme-topbar-profile-color-background-active: hsl(0 0% 11% / 0.14);
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);
427
465
  @dt-theme-sidebar-color-foreground: #3A3A3A;
428
- @dt-theme-sidebar-color-foreground-unread: #1C1C1C;
466
+ @dt-theme-sidebar-color-foreground-unread: #ff0000;
429
467
  @dt-theme-sidebar-color-background: #F9F9F9;
430
468
  @dt-theme-sidebar-icon-color-foreground: #3A3A3A;
431
469
  @dt-theme-sidebar-status-color-foreground: #535353;
432
- @dt-theme-sidebar-row-color-background: hsl(0 0% 11% / 0);
433
- @dt-theme-sidebar-row-color-background-hover: hsl(0 0% 11% / 0.12);
434
- @dt-theme-sidebar-row-color-background-active: hsl(0 0% 11% / 0.16);
435
- @dt-theme-sidebar-selected-row-color-foreground: #1C1C1C;
436
- @dt-theme-sidebar-selected-row-color-background: hsl(0 0% 11% / 0.1);
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);
437
475
  @dt-theme-sidebar-section-color-foreground: #535353;
438
- @dt-theme-presence-color-background-available: #008E52;
476
+ @dt-theme-presence-color-background-available: #52C926;
439
477
  @dt-theme-presence-color-background-busy-unavailable: #FF1356;
440
478
  @dt-theme-presence-color-background-busy: #FF9E0E;
441
479
  @dt-theme-presence-color-background-offline: #ffffff;
@@ -470,20 +508,21 @@
470
508
  @dt-badge-color-background-critical: #FFABA4;
471
509
  @dt-badge-color-background-bulletin: #7C52FF;
472
510
  @dt-badge-color-background-bulletin-subtle: #DAC7FF;
473
- @dt-badge-color-background-ai: linear-gradient(135deg, #FF1BA4 10%, #7C52FF 90%);
474
- @dt-badge-color-foreground-default: #1C1C1C;
511
+ @dt-badge-color-background-ai: linear-gradient(135deg, #FF1BA4 10%, #ff0000 90%);
512
+ @dt-badge-color-foreground-default: #000000;
475
513
  @dt-badge-color-foreground-bulletin: #ffffff;
476
514
  @dt-badge-color-foreground-bulletin-subtle: #3A1D95;
477
- @dt-badge-color-border-default: hsl(0 0% 11% / 0.1);
478
- @dt-badge-color-border-bulletin-subtle: hsl(255 100% 66.1% / 0.5);
515
+ @dt-badge-color-foreground-ai: #ffffff;
516
+ @dt-badge-color-border-default: hsl(0 0% 11% / 0.11);
517
+ @dt-badge-color-border-bulletin-subtle: hsl(0 100% 50% / 0.5);
479
518
  @dt-button-font-size-xs: 12px; // Extra small Button text size
480
519
  @dt-button-font-size-sm: 12px; // Small Button text size
481
520
  @dt-button-font-size-md: 15px; // Medium Button text size
482
521
  @dt-button-font-size-lg: 19px; // Large Button text size
483
522
  @dt-button-font-size-xl: 27px; // Extra large Button text size
484
- @dt-button-font-weight-xs: 600;
485
- @dt-button-font-weight-sm: 600;
486
- @dt-button-font-weight-md: 600;
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
487
526
  @dt-button-font-weight-lg: 500; // Font weight for LG button
488
527
  @dt-button-font-weight-xl: 400; // Font weight for XL button
489
528
  @dt-button-line-height-xs: 1.2; // Line-height for XS button
@@ -500,8 +539,10 @@
500
539
  @dt-checkbox-size-height: 1.6rem;
501
540
  @dt-checkbox-size-radius: 0.4rem;
502
541
  @dt-checkbox-color-border-unchecked: hsl(0 0% 11% / 0.25);
503
- @dt-checkbox-color-border-checked: #7C52FF;
542
+ @dt-checkbox-color-border-checked: #ff0000;
504
543
  @dt-checkbox-color-background-checked: #7C52FF;
544
+ @dt-checkbox-color-foreground-default: transparent;
545
+ @dt-checkbox-color-foreground-checked: #F9F9F9;
505
546
  @dt-icon-size-100: 12px;
506
547
  @dt-icon-size-200: 14px;
507
548
  @dt-icon-size-300: 18px;
@@ -522,5 +563,7 @@
522
563
  @dt-radio-size-height: 1.6rem;
523
564
  @dt-radio-size-radius: 50%;
524
565
  @dt-radio-color-border-unchecked: hsl(0 0% 11% / 0.25);
525
- @dt-radio-color-border-checked: #7C52FF;
566
+ @dt-radio-color-border-checked: #ff0000;
526
567
  @dt-radio-color-background-checked: #7C52FF;
568
+ @dt-radio-color-foreground-default: transparent;
569
+ @dt-radio-color-foreground-checked: #F9F9F9;