@drivenets/design-system 0.14.0 → 0.16.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 (193) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/README.md +1 -1
  3. package/dist/index.cjs +1239 -262
  4. package/dist/index.d.cts +904 -1169
  5. package/dist/index.d.cts.map +1 -1
  6. package/dist/index.d.ts +904 -1169
  7. package/dist/index.d.ts.map +1 -1
  8. package/dist/index.js +1221 -258
  9. package/dist/index.js.map +1 -1
  10. package/dist/index.min.css +1 -1
  11. package/package.json +15 -12
  12. package/src/components/ds-alert-banner/ds-alert-banner.tsx +11 -2
  13. package/src/components/ds-autocomplete/ds-autocomplete.figma.ts +36 -0
  14. package/src/components/ds-autocomplete/ds-autocomplete.tsx +2 -0
  15. package/src/components/ds-avatar/ds-avatar.figma.ts +30 -0
  16. package/src/components/ds-avatar/ds-avatar.tsx +6 -1
  17. package/src/components/ds-avatar/ds-avatar.types.ts +5 -2
  18. package/src/components/ds-avatar-group/ds-avatar-group.figma.ts +27 -0
  19. package/src/components/ds-avatar-group/ds-avatar-group.tsx +6 -1
  20. package/src/components/ds-avatar-group/ds-avatar-group.types.ts +3 -1
  21. package/src/components/ds-breadcrumb/ds-breadcrumb.figma.ts +19 -0
  22. package/src/components/ds-breadcrumb/ds-breadcrumb.tsx +2 -0
  23. package/src/components/ds-button/ds-button.tsx +2 -0
  24. package/src/components/ds-button-v3/ds-button-v3.figma.ts +1 -1
  25. package/src/components/ds-button-v3/ds-button-v3.tsx +6 -0
  26. package/src/components/ds-button-v3/index.ts +2 -0
  27. package/src/components/ds-card/ds-card.tsx +7 -3
  28. package/src/components/ds-catalog-layout/ds-catalog-layout.tsx +8 -0
  29. package/src/components/ds-checkbox/ds-checkbox-level-2.figma.ts +40 -0
  30. package/src/components/ds-checkbox/ds-checkbox.figma.ts +45 -0
  31. package/src/components/ds-checkbox/ds-checkbox.module.scss +1 -1
  32. package/src/components/ds-checkbox/ds-checkbox.tsx +9 -1
  33. package/src/components/ds-checkbox-group/ds-checkbox-group.figma.ts +15 -0
  34. package/src/components/ds-checkbox-group/ds-checkbox-group.tsx +2 -0
  35. package/src/components/ds-chip/ds-chip.tsx +2 -0
  36. package/src/components/ds-chip-group/ds-chip-group.tsx +2 -0
  37. package/src/components/ds-comment-bubble/components/ds-comment-thread/ds-comment-thread.tsx +1 -0
  38. package/src/components/ds-comment-bubble/components/ds-thread-item/ds-thread-item.tsx +1 -0
  39. package/src/components/ds-comment-bubble/ds-comment-bubble.tsx +1 -0
  40. package/src/components/ds-comment-card/ds-comment-card.tsx +1 -0
  41. package/src/components/ds-comment-indicator/ds-comment-indicator.tsx +1 -0
  42. package/src/components/ds-comments-drawer/ds-comments-drawer.tsx +1 -0
  43. package/src/components/ds-confirmation/ds-confirmation.tsx +1 -0
  44. package/src/components/ds-date-input/ds-date-input.tsx +2 -0
  45. package/src/components/ds-date-picker/ds-date-picker.tsx +9 -0
  46. package/src/components/ds-date-picker/ds-date-picker.types.ts +1 -1
  47. package/src/components/ds-date-range-picker/ds-date-range-picker.tsx +2 -0
  48. package/src/components/ds-dialog/ds-dialog.tsx +9 -0
  49. package/src/components/ds-dialog/ds-dialog.types.ts +1 -1
  50. package/src/components/ds-divider/ds-divider.figma.ts +19 -0
  51. package/src/components/ds-divider/ds-divider.tsx +2 -0
  52. package/src/components/ds-drawer/ds-drawer.module.scss +14 -0
  53. package/src/components/ds-drawer/ds-drawer.tsx +30 -1
  54. package/src/components/ds-drawer/ds-drawer.types.ts +7 -0
  55. package/src/components/ds-drawer/figma/ds-drawer-content.figma.ts +15 -0
  56. package/src/components/ds-drawer/figma/ds-drawer-footer.figma.ts +19 -0
  57. package/src/components/ds-drawer/figma/ds-drawer-header.figma.ts +16 -0
  58. package/src/components/ds-drawer/figma/ds-drawer.figma.ts +36 -0
  59. package/src/components/ds-dropdown-menu/ds-dropdown-menu.module.scss +12 -3
  60. package/src/components/ds-dropdown-menu/ds-dropdown-menu.tsx +24 -6
  61. package/src/components/ds-dropdown-menu/ds-dropdown-menu.types.ts +10 -1
  62. package/src/components/ds-dropdown-menu/figma/ds-dropdown-menu-footer.figma.ts +11 -0
  63. package/src/components/ds-dropdown-menu/figma/ds-dropdown-menu-group.figma.ts +23 -0
  64. package/src/components/ds-dropdown-menu/figma/ds-dropdown-menu-item.figma.ts +29 -0
  65. package/src/components/ds-dropdown-menu/figma/ds-dropdown-menu-separator.figma.ts +11 -0
  66. package/src/components/ds-dropdown-menu/figma/ds-dropdown-menu.figma.ts +24 -0
  67. package/src/components/ds-expandable-text-input/ds-expandable-text-input.figma.ts +24 -0
  68. package/src/components/ds-expandable-text-input/ds-expandable-text-input.tsx +1 -0
  69. package/src/components/ds-file-upload/ds-file-upload.figma.ts +29 -0
  70. package/src/components/ds-file-upload/ds-file-upload.tsx +2 -0
  71. package/src/components/ds-file-upload/hooks/use-file-upload.ts +7 -0
  72. package/src/components/ds-filter-status-icon/ds-filter-status-icon.figma.ts +22 -0
  73. package/src/components/ds-filter-status-icon/ds-filter-status-icon.tsx +1 -0
  74. package/src/components/ds-form-control/ds-form-control.tsx +3 -0
  75. package/src/components/ds-grid/index.ts +3 -0
  76. package/src/components/ds-icon/ds-icon.tsx +2 -0
  77. package/src/components/ds-key-value-pair/ds-key-value-pair.figma.ts +24 -0
  78. package/src/components/ds-key-value-pair/ds-key-value-pair.tsx +2 -0
  79. package/src/components/ds-loader/ds-loader.figma.ts +11 -0
  80. package/src/components/ds-loader/ds-loader.tsx +2 -0
  81. package/src/components/ds-modal/ds-modal.tsx +9 -0
  82. package/src/components/ds-number-input/ds-number-input.tsx +2 -0
  83. package/src/components/ds-panel/ds-panel.figma.ts +16 -0
  84. package/src/components/ds-panel/index.ts +2 -0
  85. package/src/components/ds-password-input/ds-password-input.tsx +2 -0
  86. package/src/components/ds-popover/ds-popover.tsx +9 -0
  87. package/src/components/ds-popover/figma/ds-popover-content-item.figma.ts +18 -0
  88. package/src/components/ds-popover/figma/ds-popover-content.figma.ts +15 -0
  89. package/src/components/ds-popover/figma/ds-popover-footer.figma.ts +19 -0
  90. package/src/components/ds-popover/figma/ds-popover-header.figma.ts +16 -0
  91. package/src/components/ds-popover/figma/ds-popover.figma.ts +34 -0
  92. package/src/components/ds-progress-arc/ds-progress-arc.figma.ts +23 -0
  93. package/src/components/ds-progress-arc/ds-progress-arc.tsx +2 -0
  94. package/src/components/ds-progress-donut/ds-progress-donut.figma.ts +45 -0
  95. package/src/components/ds-progress-donut/ds-progress-donut.tsx +2 -0
  96. package/src/components/ds-progress-linear/ds-progress-linear.figma.ts +26 -0
  97. package/src/components/ds-progress-linear/ds-progress-linear.tsx +2 -0
  98. package/src/components/ds-progress-task-bar/ds-progress-task-bar.figma.ts +29 -0
  99. package/src/components/ds-progress-task-bar/ds-progress-task-bar.module.scss +39 -0
  100. package/src/components/ds-progress-task-bar/ds-progress-task-bar.tsx +124 -0
  101. package/src/components/ds-progress-task-bar/ds-progress-task-bar.types.ts +65 -0
  102. package/src/components/ds-progress-task-bar/index.ts +2 -0
  103. package/src/components/ds-progress-task-bar/utils.ts +51 -0
  104. package/src/components/ds-radio-group/ds-radio-group.tsx +3 -0
  105. package/src/components/ds-radio-group/figma/ds-radio-group-item.figma.ts +24 -0
  106. package/src/components/ds-radio-group/figma/ds-radio-group.figma.ts +14 -0
  107. package/src/components/ds-segment-group/ds-segment-group.tsx +3 -0
  108. package/src/components/ds-segment-group/figma/ds-segment-group-item.figma.ts +25 -0
  109. package/src/components/ds-segment-group/figma/ds-segment-group.figma.ts +23 -0
  110. package/src/components/ds-select/ds-select.tsx +2 -0
  111. package/src/components/ds-site-node/ds-site-node.figma.ts +27 -0
  112. package/src/components/ds-site-node/ds-site-node.module.scss +59 -0
  113. package/src/components/ds-site-node/ds-site-node.tsx +73 -0
  114. package/src/components/ds-site-node/ds-site-node.types.ts +36 -0
  115. package/src/components/ds-site-node/hooks/use-is-overflowing.ts +31 -0
  116. package/src/components/ds-site-node/index.ts +3 -0
  117. package/src/components/ds-skeleton/ds-skeleton-circle.tsx +2 -0
  118. package/src/components/ds-skeleton/ds-skeleton-rect.tsx +2 -0
  119. package/src/components/ds-skeleton/ds-skeleton-text.tsx +2 -0
  120. package/src/components/ds-skeleton/ds-skeleton.ts +7 -1
  121. package/src/components/ds-smart-tabs/ds-smart-tabs.tsx +4 -0
  122. package/src/components/ds-spinner/ds-spinner.figma.ts +19 -0
  123. package/src/components/ds-spinner/ds-spinner.tsx +2 -0
  124. package/src/components/ds-split-button/ds-split-button.tsx +6 -0
  125. package/src/components/ds-status-badge/ds-status-badge.tsx +2 -0
  126. package/src/components/ds-status-badge-v2/index.ts +2 -0
  127. package/src/components/ds-stepper/components/ds-step-content.tsx +2 -0
  128. package/src/components/ds-stepper/components/ds-step-next-button.tsx +2 -0
  129. package/src/components/ds-stepper/components/ds-step.tsx +2 -0
  130. package/src/components/ds-stepper/ds-stepper.figma.ts +38 -0
  131. package/src/components/ds-stepper/ds-stepper.tsx +1 -0
  132. package/src/components/ds-system-status/ds-system-status.tsx +2 -0
  133. package/src/components/ds-table/components/ds-table-row/ds-table-row.module.scss +1 -1
  134. package/src/components/ds-table/components/ds-table-row/ds-table-row.tsx +2 -0
  135. package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.module.scss +1 -1
  136. package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.tsx +2 -0
  137. package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-checkbox.tsx +1 -0
  138. package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-date.tsx +1 -0
  139. package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-number.tsx +1 -0
  140. package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-select.tsx +1 -0
  141. package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-text.tsx +1 -0
  142. package/src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.module.scss +14 -2
  143. package/src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.tsx +20 -0
  144. package/src/components/ds-table/components/edit/ds-table-editing-cell/ds-table-editing-cell.tsx +1 -0
  145. package/src/components/ds-table/ds-table-column.types.ts +24 -0
  146. package/src/components/ds-table/ds-table.tsx +30 -4
  147. package/src/components/ds-table/ds-table.types.ts +7 -0
  148. package/src/components/ds-table/index.ts +4 -0
  149. package/src/components/ds-table/utils/constants.ts +5 -0
  150. package/src/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.tsx +2 -0
  151. package/src/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.tsx +2 -0
  152. package/src/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.tsx +2 -0
  153. package/src/components/ds-tabs/ds-tabs.tsx +2 -0
  154. package/src/components/ds-tabs/figma/ds-tabs-tab-vertical.figma.ts +78 -0
  155. package/src/components/ds-tabs/figma/ds-tabs-tab.figma.ts +89 -0
  156. package/src/components/ds-tabs/figma/ds-tabs-vertical.figma.ts +31 -0
  157. package/src/components/ds-tabs/figma/ds-tabs.figma.ts +29 -0
  158. package/src/components/ds-tag/ds-tag.tsx +2 -0
  159. package/src/components/ds-tag-filter/ds-tag-filter.tsx +2 -0
  160. package/src/components/ds-text-input/ds-input-field-v02.figma.ts +87 -0
  161. package/src/components/ds-text-input/ds-text-input.tsx +2 -0
  162. package/src/components/ds-textarea/ds-textarea.tsx +2 -0
  163. package/src/components/ds-time-picker/ds-time-picker.tsx +2 -0
  164. package/src/components/ds-toast/ds-toast-context.tsx +1 -0
  165. package/src/components/ds-toast/ds-toast.figma.ts +34 -0
  166. package/src/components/ds-toast/ds-toast.tsx +3 -0
  167. package/src/components/ds-toggle/ds-toggle.figma.ts +39 -0
  168. package/src/components/ds-toggle/ds-toggle.tsx +2 -0
  169. package/src/components/ds-tooltip/ds-tooltip.figma.ts +16 -0
  170. package/src/components/ds-tooltip/ds-tooltip.module.scss +8 -1
  171. package/src/components/ds-tooltip/ds-tooltip.tsx +35 -15
  172. package/src/components/ds-tooltip/ds-tooltip.types.ts +40 -0
  173. package/src/components/ds-tree/ds-tree.tsx +16 -0
  174. package/src/components/ds-typography/ds-typography.config.ts +1 -1
  175. package/src/components/ds-typography/ds-typography.figma.ts +63 -0
  176. package/src/components/ds-typography/ds-typography.module.scss +16 -0
  177. package/src/components/ds-typography/ds-typography.tsx +64 -7
  178. package/src/components/ds-typography/ds-typography.types.ts +13 -0
  179. package/src/components/ds-typography/hooks/use-truncation.ts +151 -0
  180. package/src/components/ds-user-card/ds-user-card.figma.ts +16 -0
  181. package/src/components/ds-user-card/ds-user-card.module.scss +25 -0
  182. package/src/components/ds-user-card/ds-user-card.tsx +31 -0
  183. package/src/components/ds-user-card/ds-user-card.types.ts +26 -0
  184. package/src/components/ds-user-card/index.ts +2 -0
  185. package/src/components/ds-vertical-tabs/ds-vertical-tabs.tsx +6 -0
  186. package/src/components/ds-workspace-layout/ds-workspace-layout.tsx +10 -0
  187. package/src/index.ts +3 -0
  188. package/src/styles/_root.scss +468 -363
  189. package/src/styles/shared/_dropdown.scss +2 -2
  190. package/src/styles/styles.scss +0 -3
  191. package/src/styles/_colors.scss +0 -65
  192. package/src/styles/_root_new.scss +0 -451
  193. package/src/styles/_spacing.scss +0 -47
package/src/styles/_root.scss CHANGED
@@ -1,372 +1,477 @@
1
- // New for DS v1.2
2
-
1
+ /*
2
+ * Synced manually from Figma using the variables2css plugin.
3
+ * Plugin: https://www.figma.com/community/plugin/1261234393153346915/variables2css
4
+ *
5
+ * How to update this file:
6
+ * 1. Open the DAP Design System Figma file.
7
+ * 2. Run the variables2css plugin.
8
+ * 3. Select collections: "DAP-root-colors", "alias", "DAP uses", "Spacing", "Type Primitives".
9
+ * 4. Config:
10
+ * - Type: CSS
11
+ * - Color: Hex
12
+ * - Unit: px
13
+ * - Tick only "Use root alias".
14
+ * 5. Copy the plugin output and paste it over the contents of this file.
15
+ */
16
+
17
+ /* DAP-root-colors */
3
18
  :root {
4
- /* Brand */
5
- --color-brand-50: #e5e8ed;
6
- --color-brand-100: #bfc6d1;
7
- --color-brand-200: #99a3b6;
8
- --color-brand-300: #667691;
9
- --color-brand-400: #405375;
10
- --color-brand-500: #001a47;
11
- --color-brand-600: #001436;
12
- --color-brand-700: #000d24;
13
-
14
- /* Blue */
15
- --color-blue-50: #edf7ff;
16
- --color-blue-100: #d6eaff;
17
- --color-blue-200: #b5ddff;
18
- --color-blue-300: #83c8ff;
19
- --color-blue-400: #48aaff;
20
- --color-blue-500: #1e83ff;
21
- --color-blue-600: #0661ff;
22
- --color-blue-700: #004cff;
23
- --color-blue-800: #083bc5;
24
- --color-blue-900: #0d379b;
25
- --color-blue-950: #0e235d;
26
-
27
- /* Gray */
28
- --color-gray-50: #ffffff;
29
- --color-gray-100: #f3f5fa;
30
- --color-gray-200: #e5e8ed;
31
- --color-gray-300: #c7c9cc;
32
- --color-gray-400: #a5afba;
33
- --color-gray-500: #8b98a6;
34
- --color-gray-600: #4c5f76;
35
- --color-gray-700: #2c3a4b;
36
- --color-gray-800: #26303b;
37
- --color-gray-900: #000000;
38
-
39
- /* Green */
40
- --color-green-50: #ecfdf6;
41
- --color-green-100: #d2f9e7;
42
- --color-green-200: #a9f1d4;
43
- --color-green-300: #71e4bc;
44
- --color-green-400: #39cea0;
45
- --color-green-500: #13a47c;
46
- --color-green-600: #028764;
47
- --color-green-700: #07654c;
48
- --color-green-800: #085242;
49
- --color-green-900: #074236;
50
-
51
- /* Red */
52
- --color-red-50: #ffedf0;
53
- --color-red-100: #f5c2bf;
54
- --color-red-200: #eb8580;
55
- --color-red-300: #e14840;
56
- --color-red-400: #d70a00;
57
- --color-red-500: #a10800;
58
- --color-red-600: #6b0500;
59
- --color-red-700: #360300;
60
-
61
- /* Orange */
62
- --color-orange-50: #fff7ed;
63
- --color-orange-100: #ffedd5;
64
- --color-orange-200: #fed7aa;
65
- --color-orange-300: #fdba74;
66
- --color-orange-400: #fc9947;
67
- --color-orange-500: #fc8514;
68
- --color-orange-600: #c9510c;
69
- --color-orange-700: #9a3412;
70
- --color-orange-800: #7c2d12;
71
- --color-orange-900: #581f07;
72
-
73
- /* Purple */
74
- --color-purple-50: #f1f3fd;
75
- --color-purple-100: #dee3fb;
76
- --color-purple-200: #c5d0f8;
77
- --color-purple-300: #9db2f3;
78
- --color-purple-400: #6f8beb;
79
- --color-purple-500: #4a61e3;
80
- --color-purple-600: #3946d7;
81
- --color-purple-700: #2f34c6;
82
- --color-purple-800: #2c2da1;
83
- --color-purple-900: #292b7f;
84
- --color-purple-950: #1d1d4e;
85
-
86
- /* Data */
87
- --color-data-pink: #eb3693;
88
- --color-data-fuchsia: #d602ee;
89
- --color-data-deep-fuchsia: #9c27b0;
90
- --color-data-light-purple: #e6d4ff;
91
- --color-data-purple: #6200ee;
92
- --color-data-deep-purple: #3b00ed;
93
- --color-data-blue: #3946d7;
94
- --color-data-teal: #26a69a;
95
- --color-data-green: #43a047;
96
- --color-data-lime: #c0ca33;
97
- --color-data-yellow: #ffc107;
98
- --color-data-amber: #ff9800;
99
- --color-data-orange: #ee6002;
100
- --color-data-rose: #d81b60;
101
- --color-data-error: #b00020;
102
-
103
- /* Dark Blue */
104
- --color-dark-blue-50: #b3ccff;
105
- --color-dark-blue-100: #85b5ff;
106
- --color-dark-blue-200: #1a5eff;
107
- --color-dark-blue-300: #3d75ff;
108
- --color-dark-blue-400: #12357e;
109
- --color-dark-blue-500: #31466b;
110
-
111
- /* Dark Gray */
112
- --color-dark-gray-50: #e0e6f6;
113
- --color-dark-gray-100: #7c8291;
114
- --color-dark-gray-200: #2a3450;
115
-
116
- /* Aliases */
117
-
118
- /* Brand */
119
- --color-brand-050: var(--color-brand-50);
120
- --color-brand-500-default: var(--color-brand-500);
121
-
122
- /* Primary */
123
- --color-primary-050: var(--color-blue-50);
124
- --color-primary-100: var(--color-blue-100);
125
- --color-primary-200: var(--color-blue-200);
126
- --color-primary-300: var(--color-blue-300);
127
- --color-primary-400: var(--color-blue-400);
128
- --color-primary-500: var(--color-blue-500);
129
- --color-primary-600: var(--color-blue-600);
130
- --color-primary-700-default: var(--color-blue-700);
131
- --color-primary-800: var(--color-blue-800);
132
- --color-primary-900: var(--color-blue-900);
133
- --color-primary-950: var(--color-blue-950);
134
-
135
- /* Secondary */
136
- --color-secondary-white: var(--color-gray-50);
137
- --color-secondary-100: var(--color-gray-100);
138
- --color-secondary-200: var(--color-gray-200);
139
- --color-secondary-300: var(--color-gray-300);
140
- --color-secondary-400: var(--color-gray-400);
141
- --color-secondary-500-net-4: var(--color-gray-500);
142
- --color-secondary-600-net-2: var(--color-gray-600);
143
- --color-secondary-700-net-1: var(--color-gray-700);
144
- --color-secondary-800: var(--color-gray-800);
145
- --color-secondary-black: var(--color-gray-900);
146
-
147
- /* Positive */
148
- --color-positive-050: var(--color-green-50);
149
- --color-positive-100: var(--color-green-100);
150
- --color-positive-200: var(--color-green-200);
151
- --color-positive-300: var(--color-green-300);
152
- --color-positive-400: var(--color-green-400);
153
- --color-positive-500: var(--color-green-500);
154
- --color-positive-600: var(--color-green-600);
155
- --color-positive-700-default: var(--color-green-700);
156
- --color-positive-800: var(--color-green-800);
157
- --color-positive-900: var(--color-green-900);
158
-
159
- /* Negative */
160
- --color-negative-050: var(--color-red-50);
161
- --color-negative-100: var(--color-red-100);
162
- --color-negative-200: var(--color-red-200);
163
- --color-negative-300: var(--color-red-300);
164
- --color-negative-400-default: var(--color-red-400);
165
- --color-negative-500: var(--color-red-500);
166
- --color-negative-600: var(--color-red-600);
167
- --color-negative-700: var(--color-red-700);
168
-
169
- /* Warning */
170
- --color-warning-050: var(--color-orange-50);
171
- --color-warning-100: var(--color-orange-100);
172
- --color-warning-200: var(--color-orange-200);
173
- --color-warning-300: var(--color-orange-300);
174
- --color-warning-400: var(--color-orange-400);
175
- --color-warning-500: var(--color-orange-500);
176
- --color-warning-600-default: var(--color-orange-600);
177
- --color-warning-700: var(--color-orange-700);
178
- --color-warning-800: var(--color-orange-800);
179
- --color-warning-900: var(--color-orange-900);
180
-
181
- /* Info */
182
- --color-info-050: var(--color-blue-50);
183
- --color-info-100: var(--color-blue-100);
184
- --color-info-200: var(--color-blue-200);
185
- --color-info-300: var(--color-blue-300);
186
- --color-info-400: var(--color-blue-400);
187
- --color-info-500: var(--color-blue-500);
188
- --color-info-600-default: var(--color-blue-600);
189
- --color-info-700: var(--color-blue-700);
190
- --color-info-800-progress: var(--color-blue-800);
191
- --color-info-900: var(--color-blue-900);
192
- --color-info-950: var(--color-blue-950);
193
-
194
- /* Darks */
195
- --color-darks-050: var(--color-dark-gray-50);
196
- --color-darks-100: var(--color-dark-blue-50);
197
- --color-darks-200: var(--color-dark-blue-100);
198
- --color-darks-300: var(--color-dark-blue-300);
199
- --color-darks-400: var(--color-dark-blue-200);
200
- --color-darks-500: var(--color-dark-blue-400);
201
- --color-darks-600: var(--color-dark-blue-500);
202
- --color-darks-700: var(--color-dark-gray-200);
203
-
204
- /* Dap-Map (Semantic Tokens) */
205
-
206
- /* Background */
207
- --color-background: var(--color-secondary-white);
208
- --color-background-secondary: var(--color-secondary-100);
209
- --color-background-tertiary: var(--color-secondary-200);
210
- --color-background-disable: var(--color-secondary-300);
211
- --color-background-brand: var(--color-brand-500-default);
212
- --color-background-selected: var(--color-primary-700-default);
213
- --color-background-selected-hover: var(--color-primary-800);
214
- --color-background-selected-weak: var(--color-primary-050);
215
- --color-background-secondary-selected-weak: var(--color-secondary-100);
216
- --color-background-tertiary-selected-weak: var(--color-secondary-200);
217
- --color-background-deselected: var(--color-secondary-500-net-4);
218
- --color-background-deselected-hover: var(--color-secondary-600-net-2);
219
- --color-background-action: var(--color-brand-500-default);
220
- --color-background-action-hover: var(--color-brand-600);
221
- --color-background-action-hover-weak: var(--color-secondary-100);
222
- --color-background-action-secondary: var(--color-secondary-white);
223
- --color-background-action-secondary-hover: var(--color-primary-100);
224
- --color-background-action-tertiary: var(--color-primary-050);
225
- --color-background-action-inverse: var(--color-secondary-700-net-1);
226
- --color-background-active-moderate: var(--color-primary-400);
227
- --color-background-success: var(--color-positive-050);
228
- --color-background-success-strong: var(--color-positive-600);
229
- --color-background-success-stronger: var(--color-positive-700-default);
230
- --color-background-info: var(--color-info-050);
231
- --color-background-info-strong: var(--color-info-800-progress);
232
- --color-background-warning: var(--color-warning-100);
233
- --color-background-warning-strong: var(--color-warning-600-default);
234
- --color-background-warning-weak: var(--color-negative-050);
235
- --color-background-danger-strong: var(--color-negative-400-default);
236
- --color-background-danger-strong-hover: var(--color-negative-500);
237
- --color-background-danger-weak: var(--color-negative-050);
238
-
239
- /* Border */
240
- --color-border-secondary: var(--color-secondary-200);
241
- --color-border-tertiary: var(--color-secondary-100);
242
- --color-border: var(--color-secondary-300);
243
- --color-border-contrast: var(--color-secondary-400);
244
- --color-border-disabled: var(--color-brand-050);
245
- --color-border-action-primary: var(--color-primary-700-default);
246
- --color-border-action-primary-hover: var(--color-primary-800);
247
- --color-border-action-secondary: var(--color-brand-500-default);
248
- --color-border-action-secondary-hover: var(--color-brand-400);
249
- --color-border-danger-weak: var(--color-negative-100);
250
- --color-border-danger-strong: var(--color-negative-400-default);
251
- --color-border-success: var(--color-positive-600);
252
- --color-border-inverse: var(--color-secondary-white);
253
-
254
- /* Font */
255
- --color-font-main: var(--color-secondary-800);
256
- --color-font-secondary: var(--color-secondary-600-net-2);
257
- --color-font-action: var(--color-primary-700-default);
258
- --color-font-action-hover: var(--color-primary-800);
259
- --color-font-action-secondary: var(--color-brand-500-default);
260
- --color-font-action-secondary-hover: var(--color-primary-800);
261
- --color-font-disabled: var(--color-secondary-500-net-4);
262
- --color-font-highlight: var(--color-data-deep-fuchsia);
263
- --color-font-success: var(--color-positive-700-default);
264
- --color-font-warning: var(--color-warning-700);
265
- --color-font-danger: var(--color-negative-500);
266
- --color-font-on-action: var(--color-secondary-white);
267
- --color-font-on-disabled: var(--color-secondary-800);
268
- --color-font-code: var(--color-info-900);
269
-
270
- /* Icon */
271
- --color-icon-primary: var(--color-primary-700-default);
272
- --color-icon-secondary: var(--color-brand-500-default);
273
- --color-icon-success: var(--color-positive-700-default);
274
- --color-icon-warning: var(--color-warning-600-default);
275
- --color-icon-danger: var(--color-negative-400-default);
276
- --color-icon-information-main: var(--color-secondary-500-net-4);
277
- --color-icon-information-secondary: var(--color-info-600-default);
278
- --color-icon-inverse: var(--color-secondary-white);
279
-
280
- /* Outline */
281
- --color-outline-weak: var(--color-primary-300);
282
- --color-outline-moderate: var(--color-primary-500);
283
- --color-outline-strong: var(--color-brand-500-default);
284
- --color-outline-extreme: var(--color-secondary-black);
285
- --color-outline-inverse: var(--color-secondary-white);
286
-
287
- /* Shadow */
288
- --color-shadow-weak: rgba(0, 0, 0, 0.1);
289
- --color-shadow-moderate: rgba(0, 0, 0, 0.15);
290
- --color-shadow-strong: rgba(0, 0, 0, 0.4);
291
-
292
- /* Status BG */
293
- --color-status-bg-success: var(--color-background-success);
294
- --color-status-bg-progress: var(--color-background-info);
295
- --color-status-bg-pending: var(--color-warning-100);
296
- --color-status-bg-neutral: var(--color-background-secondary);
297
- --color-status-bg-inactive: var(--color-background-tertiary-selected-weak);
298
- --color-status-bg-warning: var(--color-warning-200);
299
- --color-status-bg-failed: var(--color-background-danger-weak);
300
-
301
- /* Dark Buttons */
302
- --color-dark-buttons-primary: var(--color-darks-400);
303
- --color-dark-buttons-primary-hover: var(--color-darks-300);
304
- --color-dark-buttons-secondary-hover: var(--color-darks-200);
305
- --color-dark-buttons-secondary-background: var(--color-darks-500);
306
- --color-dark-buttons-secondary-light: var(--color-dark-gray-50);
307
- --color-dark-buttons-secondary-light-hover-background: var(--color-darks-600);
308
- --color-dark-buttons-tertiary: var(--color-darks-050);
309
- --color-dark-buttons-tertiary-hover-background: var(--color-dark-gray-100);
310
-
311
- /* Gradient */
312
- --color-gradient-violet-background: linear-gradient(90deg, #001b48 -0.12%, #312e81 99.86%);
313
- --color-gradient-violet-transparent: linear-gradient(
314
- 180deg,
315
- rgba(30, 89, 215, 0.4) 0%,
316
- rgba(0, 27, 72, 0.16) 100%
317
- );
318
- --color-gradient-blue-light: linear-gradient(116deg, #e9eefc 22.81%, #d6e2ff 99.14%);
319
- --color-gradient-linear-1: linear-gradient(90deg, #014afb 0%, #152a7e 100%);
320
-
321
- /* Markers */
322
- --color-marker-magenta-12: rgba(255, 0, 183, 0.12);
323
- --color-marker-magenta-60: rgba(255, 0, 183, 0.6);
324
- --color-marker-magenta-100: rgba(255, 0, 183);
325
- --color-marker-yellow-100: #fff500;
19
+ /* Mode 1 */
20
+ /* color */
21
+ --color-dap-blue-050: #edf7ff;
22
+ --color-dap-blue-075: #e1efff;
23
+ --color-dap-blue-100: #d6eaff;
24
+ --color-dap-blue-200: #b5ddff;
25
+ --color-dap-blue-300: #83c8ff;
26
+ --color-dap-blue-400: #48aaff;
27
+ --color-dap-blue-500: #1e83ff;
28
+ --color-dap-blue-600: #0661ff;
29
+ --color-dap-blue-700: #004cff;
30
+ --color-dap-blue-800: #083bc5;
31
+ --color-dap-blue-900: #0d379b;
32
+ --color-dap-blue-950: #0e235d;
33
+ --color-dap-brand-050: #e5e8ed;
34
+ --color-dap-brand-100: #bfc6d1;
35
+ --color-dap-brand-200: #99a3b6;
36
+ --color-dap-brand-300: #667691;
37
+ --color-dap-brand-400: #405375;
38
+ --color-dap-brand-500: #001a47;
39
+ --color-dap-brand-600: #001436;
40
+ --color-dap-brand-700: #000d24;
41
+ --color-dap-dark-blue-050: #b3ccff;
42
+ --color-dap-dark-blue-100: #85b5ff;
43
+ --color-dap-dark-blue-150: #5e9dff;
44
+ --color-dap-dark-blue-200: #3d75ff;
45
+ --color-dap-dark-blue-300: #1a5eff;
46
+ --color-dap-dark-blue-400: #2c5ed9;
47
+ --color-dap-dark-blue-500: #0b43cc;
48
+ --color-dap-dark-blue-600: #12357e;
49
+ --color-dap-dark-blue-700: #31466b;
50
+ --color-dap-dark-gray-050: #e0e6f6;
51
+ --color-dap-dark-gray-100: #7c8291;
52
+ --color-dap-dark-gray-200: #2a3450;
53
+ --color-dap-data-amber: #ff9800;
54
+ --color-dap-data-blue: #3946d7;
55
+ --color-dap-data-deep-fuchsia: #9c27b0;
56
+ --color-dap-data-deep-purple: #3b00ed;
57
+ --color-dap-data-error: #b00020;
58
+ --color-dap-data-fuchsia: #d602ee;
59
+ --color-dap-data-green: #43a047;
60
+ --color-dap-data-light-amber: #ffeacc;
61
+ --color-dap-data-light-blue: #d7daf7;
62
+ --color-dap-data-light-deep-fuchsia: #ebd4ef;
63
+ --color-dap-data-light-deep-purple: #d7caff;
64
+ --color-dap-data-light-error: #efccd2;
65
+ --color-dap-data-light-fuchsia: #f7ccfc;
66
+ --color-dap-data-light-green: #d9ecda;
67
+ --color-dap-data-light-lime: #f2f4d6;
68
+ --color-dap-data-light-orange: #fcdfcc;
69
+ --color-dap-data-light-pink: #fbd7e9;
70
+ --color-dap-data-light-purple: #e6d4ff;
71
+ --color-dap-data-light-rose: #f7d1df;
72
+ --color-dap-data-light-teal: #d4edeb;
73
+ --color-dap-data-light-yellow: #fff3cd;
74
+ --color-dap-data-lime: #c0ca33;
75
+ --color-dap-data-orange: #ee6002;
76
+ --color-dap-data-pink: #eb3693;
77
+ --color-dap-data-purple: #6200ee;
78
+ --color-dap-data-rose: #d81b60;
79
+ --color-dap-data-teal: #26a69a;
80
+ --color-dap-data-yellow: #ffc107;
81
+ --color-dap-gray-050: #ffffff;
82
+ --color-dap-gray-100: #f3f5fa;
83
+ --color-dap-gray-200: #e5e8ed;
84
+ --color-dap-gray-300: #c7c9cc;
85
+ --color-dap-gray-400: #a5afba;
86
+ --color-dap-gray-500: #8b98a6;
87
+ --color-dap-gray-600: #4c5f76;
88
+ --color-dap-gray-700: #2c3a4b;
89
+ --color-dap-gray-800: #26303b;
90
+ --color-dap-gray-900: #000000;
91
+ --color-dap-green-050: #ecfdf6;
92
+ --color-dap-green-075: #d9f7e9;
93
+ --color-dap-green-100: #d2f9e7;
94
+ --color-dap-green-200: #a9f1d4;
95
+ --color-dap-green-300: #71e4bc;
96
+ --color-dap-green-400: #39cea0;
97
+ --color-dap-green-500: #13a47c;
98
+ --color-dap-green-600: #028764;
99
+ --color-dap-green-700: #07654c;
100
+ --color-dap-green-800: #085242;
101
+ --color-dap-green-900: #074236;
102
+ --color-dap-orange-050: #fff7ed;
103
+ --color-dap-orange-100: #ffedd5;
104
+ --color-dap-orange-200: #fed7aa;
105
+ --color-dap-orange-300: #fdba74;
106
+ --color-dap-orange-400: #fc9947;
107
+ --color-dap-orange-500: #fc8514;
108
+ --color-dap-orange-600: #c9510c;
109
+ --color-dap-orange-700: #9a3412;
110
+ --color-dap-orange-800: #7c2d12;
111
+ --color-dap-orange-900: #581f07;
112
+ --color-dap-purple-050: #f1f3fd;
113
+ --color-dap-purple-100: #dee3fb;
114
+ --color-dap-purple-200: #c5d0f8;
115
+ --color-dap-purple-300: #9db2f3;
116
+ --color-dap-purple-400: #6f8beb;
117
+ --color-dap-purple-500: #4a61e3;
118
+ --color-dap-purple-600: #3946d7;
119
+ --color-dap-purple-700: #2f34c6;
120
+ --color-dap-purple-800: #2c2da1;
121
+ --color-dap-purple-900: #292b7f;
122
+ --color-dap-purple-950: #1d1d4e;
123
+ --color-dap-red-050: #ffedf0;
124
+ --color-dap-red-100: #ffd2cf;
125
+ --color-dap-red-200: #eb8580;
126
+ --color-dap-red-300: #e14840;
127
+ --color-dap-red-400: #d70a00;
128
+ --color-dap-red-500: #a10800;
129
+ --color-dap-red-600: #6b0500;
130
+ --color-dap-red-700: #360300;
326
131
  }
327
-
132
+ /* alias */
328
133
  :root {
329
- /* Family */
330
- --font-family-base: 'Roboto', sans-serif;
331
- --font-family-code: 'Fira Mono', monospace;
332
-
333
- /* Font weight */
134
+ /* Mode 1 */
135
+ /* color */
136
+ --brand-050: var(--color-dap-brand-050);
137
+ --brand-100: var(--color-dap-brand-100);
138
+ --brand-200: var(--color-dap-brand-200);
139
+ --brand-300: var(--color-dap-brand-300);
140
+ --brand-400: var(--color-dap-brand-400);
141
+ --brand-500-default: var(--color-dap-brand-500);
142
+ --brand-600: var(--color-dap-brand-600);
143
+ --brand-700: var(--color-dap-brand-700);
144
+ --darks-050: var(--color-dap-dark-gray-050);
145
+ --darks-100: var(--color-dap-dark-blue-050);
146
+ --darks-200: var(--color-dap-dark-blue-100);
147
+ --darks-300: var(--color-dap-dark-blue-200);
148
+ --darks-400: var(--color-dap-dark-blue-300);
149
+ --darks-500: var(--color-dap-dark-blue-600);
150
+ --darks-600: var(--color-dap-dark-blue-700);
151
+ --darks-700: var(--color-dap-dark-gray-200);
152
+ --info-050: var(--color-dap-blue-050);
153
+ --info-100: var(--color-dap-blue-100);
154
+ --info-200: var(--color-dap-blue-200);
155
+ --info-300: var(--color-dap-blue-300);
156
+ --info-400: var(--color-dap-blue-400);
157
+ --info-500: var(--color-dap-blue-500);
158
+ --info-600-default: var(--color-dap-blue-600);
159
+ --info-700: var(--color-dap-blue-700);
160
+ --info-800-progress: var(--color-dap-blue-800);
161
+ --info-900: var(--color-dap-blue-900);
162
+ --info-950: var(--color-dap-blue-950);
163
+ --negative-050: var(--color-dap-red-050);
164
+ --negative-100: var(--color-dap-red-100);
165
+ --negative-200: var(--color-dap-red-200);
166
+ --negative-300: var(--color-dap-red-300);
167
+ --negative-400-default: var(--color-dap-red-400);
168
+ --negative-500: var(--color-dap-red-500);
169
+ --negative-600: var(--color-dap-red-600);
170
+ --negative-700: var(--color-dap-red-700);
171
+ --paused-600: var(--color-dap-purple-600);
172
+ --positive-050: var(--color-dap-green-050);
173
+ --positive-100: var(--color-dap-green-100);
174
+ --positive-200: var(--color-dap-green-200);
175
+ --positive-300: var(--color-dap-green-300);
176
+ --positive-400: var(--color-dap-green-400);
177
+ --positive-500: var(--color-dap-green-500);
178
+ --positive-600: var(--color-dap-green-600);
179
+ --positive-700-default: var(--color-dap-green-700);
180
+ --positive-800: var(--color-dap-green-800);
181
+ --positive-900: var(--color-dap-green-900);
182
+ --primary-050: var(--color-dap-blue-050);
183
+ --primary-100: var(--color-dap-blue-100);
184
+ --primary-200: var(--color-dap-blue-200);
185
+ --primary-300: var(--color-dap-blue-300);
186
+ --primary-400: var(--color-dap-blue-400);
187
+ --primary-500: var(--color-dap-blue-500);
188
+ --primary-600: var(--color-dap-blue-600);
189
+ --primary-700-default: var(--color-dap-blue-700);
190
+ --primary-800: var(--color-dap-blue-800);
191
+ --primary-900: var(--color-dap-blue-900);
192
+ --primary-950: var(--color-dap-blue-950);
193
+ --secondary-050: var(--color-dap-gray-050);
194
+ --secondary-100: var(--color-dap-gray-100);
195
+ --secondary-200: var(--color-dap-gray-200);
196
+ --secondary-300: var(--color-dap-gray-300);
197
+ --secondary-400: var(--color-dap-gray-400);
198
+ --secondary-500-net-4: var(--color-dap-gray-500);
199
+ --secondary-600-net-2: var(--color-dap-gray-600);
200
+ --secondary-700-net-1: var(--color-dap-gray-700);
201
+ --secondary-800: var(--color-dap-gray-800);
202
+ --secondary-900: var(--color-dap-gray-900);
203
+ --warning-050: var(--color-dap-orange-050);
204
+ --warning-100: var(--color-dap-orange-100);
205
+ --warning-200: var(--color-dap-orange-200);
206
+ --warning-300: var(--color-dap-orange-300);
207
+ --warning-400: var(--color-dap-orange-400);
208
+ --warning-500: var(--color-dap-orange-500);
209
+ --warning-600-default: var(--color-dap-orange-600);
210
+ --warning-700: var(--color-dap-orange-700);
211
+ --warning-800: var(--color-dap-orange-800);
212
+ --warning-900: var(--color-dap-orange-900);
213
+ }
214
+ /* DAP uses */
215
+ :root {
216
+ /* Mode 1 */
217
+ /* color */
218
+ --at-t-brand: #00a8e0;
219
+ --blue-light-1: #e9eefc;
220
+ --blue-light2: #d6e2ff;
221
+ --net-gen-1: #2f34c6;
222
+ --net-gen-2: #292b7f;
223
+ --net-gen-hover-1: #25299b;
224
+ --net-gen-hover-2: #18195a;
225
+ --net-gen-logo-dark-grey: var(--color-dap-gray-700);
226
+ --net-gen-logo-dodger-blue: #1793ff;
227
+ --net-gen-logo-light-grey: var(--color-dap-gray-500);
228
+ --net-gen-logo-ultramarine-blue: var(--color-dap-blue-700);
229
+ --nokia-brand: #005aff;
230
+ --violet-bg1: #001b48;
231
+ --violet-bg2: #312e81;
232
+ --violet-tr1: #1e59d766;
233
+ --violet-tr2: #001b4829;
234
+ --background: var(--color-dap-gray-050);
235
+ --background-action: var(--color-dap-brand-500);
236
+ --background-action-hover: var(--color-dap-brand-600);
237
+ --background-action-hover-weak: var(--color-dap-gray-100);
238
+ --background-action-inverse: var(--color-dap-gray-700);
239
+ --background-action-secondary: var(--color-dap-gray-050);
240
+ --background-action-secondary-hover: var(--color-dap-blue-100);
241
+ --background-action-tertiary-hover: var(--color-dap-blue-050);
242
+ --background-active-status: var(--color-dap-blue-075);
243
+ --background-active-moderate: var(--color-dap-blue-400);
244
+ --background-brand: var(--color-dap-brand-500);
245
+ --background-deselected: var(--color-dap-gray-500);
246
+ --background-deselected-hover: var(--color-dap-gray-600);
247
+ --background-disable: var(--color-dap-gray-300);
248
+ --background-error: var(--color-dap-red-400);
249
+ --background-error-hover: var(--color-dap-red-500);
250
+ --background-error-secondary-active: var(--color-dap-red-100);
251
+ --background-error-secondary-hover: var(--color-dap-red-050);
252
+ --background-error-secondary-selected: var(--color-dap-red-100);
253
+ --background-error-selected: var(--color-dap-red-600);
254
+ --background-error-subtle: var(--color-dap-gray-050);
255
+ --background-error-subtle-active: var(--color-dap-red-100);
256
+ --background-error-subtle-disabled: var(--color-dap-gray-100);
257
+ --background-error-subtle-hover: var(--color-dap-red-050);
258
+ --background-execution: #daf4f5;
259
+ --background-info: var(--color-dap-blue-050);
260
+ --background-info-strong: var(--color-dap-blue-800);
261
+ --background-light: var(--color-dap-dark-blue-500);
262
+ --background-light-disabled: #415b9a;
263
+ --background-light-primary: var(--color-dap-dark-blue-300);
264
+ --background-light-primary-hover: var(--color-dap-dark-blue-200);
265
+ --background-light-primary-selected: var(--color-dap-dark-blue-150);
266
+ --background-light-secondary-selected: var(--color-dap-dark-blue-400);
267
+ --background-light-subtle: var(--color-dap-blue-600);
268
+ --background-light-subtle-active: var(--color-dap-blue-400);
269
+ --background-light-subtle-hover: var(--color-dap-blue-500);
270
+ --background-neutral: var(--color-dap-gray-600);
271
+ --background-overlay: #001a4733;
272
+ --background-page: var(--color-dap-gray-100);
273
+ --background-pending: #e6e9fb;
274
+ --background-primary: var(--color-dap-blue-700);
275
+ --background-primary-hover: var(--color-dap-blue-800);
276
+ --background-primary-selected: var(--color-dap-blue-900);
277
+ --background-primary-subtle: var(--color-dap-gray-050);
278
+ --background-primary-subtle-active: var(--color-dap-blue-100);
279
+ --background-primary-subtle-disabled: var(--color-dap-gray-100);
280
+ --background-primary-subtle-hover: var(--color-dap-blue-050);
281
+ --background-secondary: var(--color-dap-gray-100);
282
+ --background-secondary-hover: var(--color-dap-blue-050);
283
+ --background-secondary-selected-weak: var(--color-dap-gray-100);
284
+ --background-secondary-subtle-light-active: var(--color-dap-blue-400);
285
+ --background-secondary-subtle-light-hover: var(--color-dap-blue-500);
286
+ --background-success: var(--color-dap-green-075);
287
+ --background-success-medium: var(--color-dap-green-500);
288
+ --background-success-strong: var(--color-dap-green-600);
289
+ --background-success-strong-hover: var(--color-dap-green-700);
290
+ --background-tertiary: var(--color-dap-gray-200);
291
+ --background-tertiary-selected-weak: var(--color-dap-gray-200);
292
+ --background-transparent-active: #ffffff4d;
293
+ --background-transparent-hover: #ffffff26;
294
+ --background-warning: var(--color-dap-orange-100);
295
+ --background-warning-strong: var(--color-dap-orange-600);
296
+ --border: var(--color-dap-gray-300);
297
+ --border-action-primary: var(--color-dap-blue-700);
298
+ --border-action-primary-hover: var(--color-dap-blue-800);
299
+ --border-action-secondary: var(--color-dap-brand-500);
300
+ --border-action-secondary-hover: var(--color-dap-brand-400);
301
+ --border-contrast: var(--color-dap-gray-400);
302
+ --border-disabled: var(--color-dap-gray-300);
303
+ --border-error: var(--color-dap-red-400);
304
+ --border-error-hover: var(--color-dap-red-500);
305
+ --border-error-medium: var(--color-dap-red-200);
306
+ --border-error-weak: var(--color-dap-red-100);
307
+ --border-field: var(--color-dap-gray-200);
308
+ --border-field-focus: var(--color-dap-blue-700);
309
+ --border-field-hover: var(--color-dap-brand-600);
310
+ --border-inverse: var(--color-dap-gray-050);
311
+ --border-light: var(--color-dap-blue-400);
312
+ --border-light-disabled: #415b9a;
313
+ --border-light-secondary: var(--color-dap-dark-blue-100);
314
+ --border-secondary: var(--color-dap-gray-200);
315
+ --border-secondary-hover: var(--color-dap-dark-blue-100);
316
+ --border-success: var(--color-dap-green-600);
317
+ --border-tertiary: var(--color-dap-gray-100);
318
+ --border-warning-strong: var(--color-dap-orange-600);
319
+ --error: var(--color-dap-red-050);
320
+ --font-action: var(--color-dap-blue-700);
321
+ --font-action-hover: var(--color-dap-blue-800);
322
+ --font-action-secondary: var(--color-dap-brand-500);
323
+ --font-action-secondary-hover: var(--color-dap-blue-800);
324
+ --font-code: var(--color-dap-blue-900);
325
+ --font-disabled: var(--color-dap-gray-300);
326
+ --font-error: var(--color-dap-red-500);
327
+ --font-highlight: var(--color-dap-data-deep-fuchsia);
328
+ --font-light-disabled: var(--color-dap-gray-500);
329
+ --font-main: var(--color-dap-gray-800);
330
+ --font-on-action: var(--color-dap-gray-050);
331
+ --font-on-disabled: var(--color-dap-gray-800);
332
+ --font-placeholder: var(--color-dap-gray-500);
333
+ --font-secondary: var(--color-dap-gray-600);
334
+ --font-success: var(--color-dap-green-700);
335
+ --font-warning: var(--color-dap-orange-700);
336
+ --icon-on-button: var(--color-dap-gray-050);
337
+ --icon-action: var(--color-dap-blue-700);
338
+ --icon-action-hover: var(--color-dap-blue-800);
339
+ --icon-action-secondary: var(--color-dap-brand-500);
340
+ --icon-disabled: var(--color-dap-gray-300);
341
+ --icon-error: var(--color-dap-red-500);
342
+ --icon-execution: #00939d;
343
+ --icon-information-main: var(--color-dap-gray-500);
344
+ --icon-information-secondary: var(--color-dap-blue-600);
345
+ --icon-inverse: var(--color-dap-gray-050);
346
+ --icon-main: var(--color-dap-gray-800);
347
+ --icon-on-dark-disabled: var(--color-dap-gray-500);
348
+ --icon-paused: var(--color-dap-purple-600);
349
+ --icon-pending: #212b86;
350
+ --icon-secondary: var(--color-dap-gray-600);
351
+ --icon-success: var(--color-dap-green-700);
352
+ --icon-success-light: var(--color-dap-green-400);
353
+ --icon-tertiary: var(--color-dap-brand-200);
354
+ --icon-warning: var(--color-dap-orange-600);
355
+ --icon-warning-light: var(--color-dap-orange-400);
356
+ --light-buttons-primary: var(--color-dap-dark-blue-300);
357
+ --light-buttons-primary-2: var(--color-dap-dark-blue-300);
358
+ --light-buttons-primary-3: var(--color-dap-dark-blue-300);
359
+ --light-buttons-primary-4: var(--color-dap-dark-blue-300);
360
+ --light-buttons-primary-5: var(--color-dap-dark-blue-300);
361
+ --light-buttons-primary-6: var(--color-dap-dark-blue-300);
362
+ --light-buttons-primary-7: var(--color-dap-dark-blue-300);
363
+ --light-buttons-primary-hover: var(--color-dap-dark-blue-200);
364
+ --light-buttons-primary-hover-2: var(--color-dap-dark-blue-200);
365
+ --light-buttons-primary-hover-3: var(--color-dap-dark-blue-200);
366
+ --light-buttons-primary-hover-4: var(--color-dap-dark-blue-200);
367
+ --light-buttons-primary-hover-5: var(--color-dap-dark-blue-200);
368
+ --light-buttons-primary-hover-6: var(--color-dap-dark-blue-200);
369
+ --light-buttons-primary-hover-7: var(--color-dap-dark-blue-200);
370
+ --light-buttons-secondary-background: var(--color-dap-dark-blue-600);
371
+ --light-buttons-secondary-hover: var(--color-dap-dark-blue-100);
372
+ --light-buttons-secondary-light: var(--color-dap-dark-gray-050);
373
+ --light-buttons-secondary-light-hover-background: var(--color-dap-dark-blue-700);
374
+ --light-buttons-tertiary: var(--color-dap-dark-gray-050);
375
+ --light-buttons-tertiary-hover-background: var(--color-dap-dark-gray-100);
376
+ --outline-extreme: var(--color-dap-gray-900);
377
+ --outline-inverse: var(--color-dap-gray-050);
378
+ --outline-moderate: var(--color-dap-blue-500);
379
+ --outline-strong: var(--color-dap-brand-500);
380
+ --outline-weak: var(--color-dap-blue-300);
381
+ --primary-green: #93c020;
382
+ --radial-1-1: #014bfd;
383
+ --radial-1-2: #0a3cc2;
384
+ --radial-1-3: #152a7e;
385
+ --schema-amber: var(--color-dap-data-amber);
386
+ --schema-blue: var(--color-dap-data-blue);
387
+ --schema-deep-fuchsia: var(--color-dap-data-deep-fuchsia);
388
+ --schema-deep-purple: var(--color-dap-data-deep-purple);
389
+ --schema-error: var(--color-dap-data-error);
390
+ --schema-fuchsia: var(--color-dap-data-fuchsia);
391
+ --schema-green: var(--color-dap-data-green);
392
+ --schema-light-purple: var(--color-dap-data-light-purple);
393
+ --schema-light-amber: var(--color-dap-data-light-amber);
394
+ --schema-light-blue: var(--color-dap-data-light-blue);
395
+ --schema-light-deep-purple: var(--color-dap-data-light-deep-purple);
396
+ --schema-light-error: var(--color-dap-data-light-error);
397
+ --schema-light-green: var(--color-dap-data-light-green);
398
+ --schema-light-lime: var(--color-dap-data-light-lime);
399
+ --schema-light-orange: var(--color-dap-data-light-orange);
400
+ --schema-light-pink: var(--color-dap-data-light-pink);
401
+ --schema-light-rose: var(--color-dap-data-light-rose);
402
+ --schema-light-teal: var(--color-dap-data-light-teal);
403
+ --schema-light-yellow: var(--color-dap-data-light-yellow);
404
+ --schema-lime: var(--color-dap-data-lime);
405
+ --schema-orange: var(--color-dap-data-orange);
406
+ --schema-pink: var(--color-dap-data-pink);
407
+ --schema-purple: var(--color-dap-data-purple);
408
+ --schema-rose: var(--color-dap-data-rose);
409
+ --schema-teal: var(--color-dap-data-teal);
410
+ --schema-yellow: var(--color-dap-data-yellow);
411
+ --schema-light-deep-fuchsia: var(--color-dap-data-light-deep-fuchsia);
412
+ --schema-light-fuchsia: var(--color-dap-data-light-fuchsia);
413
+ --shadow-moderate: #00000026;
414
+ --shadow-strong: #00000066;
415
+ --shadow-weak: #0000001a;
416
+ --status-bg-inactive: var(--color-dap-gray-200);
417
+ --status-bg-neutral: var(--color-dap-gray-100);
418
+ --status-bg-pending: var(--color-dap-orange-100);
419
+ --status-bg-progress: var(--color-dap-blue-050);
420
+ --status-bg-success: var(--color-dap-green-075);
421
+ --status-bg-warning: var(--color-dap-orange-200);
422
+ --text-on-button: #000000;
423
+ }
424
+ /* Spacing */
425
+ :root {
426
+ /* Default */
427
+ /* number */
428
+ --none: 0px;
429
+ --4xs: 2px;
430
+ --3xs: 4px;
431
+ --2xs: 6px;
432
+ --xs: 8px;
433
+ --sm: 12px;
434
+ --standard: 16px;
435
+ --md: 20px;
436
+ --lg: 24px;
437
+ --xl: 32px;
438
+ --2xl: 48px;
439
+ --3xl: 64px;
440
+ --4xl: 72px;
441
+ --5xl: 96px;
442
+ }
443
+ /* Type Primitives */
444
+ :root {
445
+ /* Default */
446
+ /* number */
447
+ --body-paragraph-space-xs: 8px;
448
+ --body-font-size-xs: 12px;
449
+ --body-font-size-sm: 14px;
450
+ --body-font-size-md: 16px;
451
+ --body-line-height-xs: 16px;
452
+ --body-paragraph-space-small: 16px;
453
+ --heading-font-size-large: 18px;
454
+ --body-line-height-small: 20px;
455
+ --body-paragraph-space-md: 20px;
456
+ --heading-font-size-xl: 20px;
457
+ --heading-paragraph-space-large: 20px;
458
+ --heading-paragraph-space-xl: 20px;
459
+ --body-line-height-md: 24px;
460
+ --heading-font-size-2xl: 24px;
461
+ --heading-line-height-large: 24px;
462
+ --heading-paragraph-space-2xl: 24px;
463
+ --heading-line-height-xl: 26px;
464
+ --heading-font-size-3xl: 32px;
465
+ --heading-line-height-2xl: 32px;
466
+ --heading-line-height-3xl: 40px;
467
+ --heading-paragraph-space-3xl: 40px;
334
468
  --font-weight-regular: 400;
335
469
  --font-weight-medium: 500;
336
470
  --font-weight-semi-bold: 600;
337
471
  --font-weight-bold: 700;
338
472
  --font-weight-extra-bold: 800;
339
-
340
- /* Font size / heading */
341
- --font-size-3xl: 32px;
342
- --font-size-2xl: 24px;
343
- --font-size-xl: 20px;
344
- --font-size-large: 18px;
345
-
346
- /* Font size / body */
347
- --font-size-md: 16px;
348
- --font-size-sm: 14px;
349
- --font-size-xs: 12px;
350
-
351
- /* Line height / heading */
352
- --line-height-3xl: 40px;
353
- --line-height-2xl: 32px;
354
- --line-height-xl: 26px;
355
- --line-height-large: 24px;
356
-
357
- /* Line height / body */
358
- --line-height-md: 24px;
359
- --line-height-sm: 20px;
360
- --line-height-xs: 16px;
361
-
362
- /* Paragraph spacing / heading */
363
- --paragraph-spacing-3xl: 40;
364
- --paragraph-spacing-2xl: 24;
365
- --paragraph-spacing-xl: 20;
366
- --paragraph-spacing-large: 20;
367
-
368
- /* Paragraph spacing / body */
369
- --paragraph-spacing-md: 20;
370
- --paragraph-spacing-sm: 16;
371
- --paragraph-spacing-xs: 8;
473
+ /* string */
474
+ --font-family-base: Roboto;
475
+ --font-family-code: Fira Mono;
476
+ --font-family-heading: Roboto;
372
477
  }