@syntrologie/adapt-nav 2.8.0-canary.31 → 2.8.0-canary.310

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 (144) hide show
  1. package/dist/NavWidgetLit.d.ts +56 -0
  2. package/dist/NavWidgetLit.d.ts.map +1 -0
  3. package/dist/NavWidgetLit.editable.d.ts +151 -0
  4. package/dist/NavWidgetLit.editable.d.ts.map +1 -0
  5. package/dist/NavWidgetLit.test.d.ts +8 -0
  6. package/dist/NavWidgetLit.test.d.ts.map +1 -0
  7. package/dist/chunk-SX36IHRC.js +640 -0
  8. package/dist/chunk-SX36IHRC.js.map +7 -0
  9. package/dist/editor.d.ts +66 -21
  10. package/dist/editor.d.ts.map +1 -1
  11. package/dist/editor.js +5627 -307
  12. package/dist/editor.js.map +7 -0
  13. package/dist/nav-item-editor.d.ts +43 -0
  14. package/dist/nav-item-editor.d.ts.map +1 -0
  15. package/dist/resolveNavTarget.d.ts +61 -0
  16. package/dist/resolveNavTarget.d.ts.map +1 -0
  17. package/dist/resolveNavTarget.test.d.ts +2 -0
  18. package/dist/resolveNavTarget.test.d.ts.map +1 -0
  19. package/dist/runtime.d.ts +22 -6
  20. package/dist/runtime.d.ts.map +1 -1
  21. package/dist/runtime.js +643 -142
  22. package/dist/runtime.js.map +7 -0
  23. package/dist/schema.d.ts +316 -174
  24. package/dist/schema.d.ts.map +1 -1
  25. package/dist/schema.js +155 -125
  26. package/dist/schema.js.map +7 -0
  27. package/dist/types.d.ts +7 -0
  28. package/dist/types.d.ts.map +1 -1
  29. package/package.json +12 -16
  30. package/dist/NavWidget.d.ts +0 -31
  31. package/dist/NavWidget.d.ts.map +0 -1
  32. package/dist/NavWidget.js +0 -491
  33. package/dist/cdn.d.ts +0 -62
  34. package/dist/cdn.d.ts.map +0 -1
  35. package/dist/cdn.js +0 -48
  36. package/dist/summarize.js +0 -51
  37. package/dist/types.js +0 -18
  38. package/node_modules/@syntro/design-system/README.md +0 -335
  39. package/node_modules/@syntro/design-system/dist/assets/syntrologie-logo.svg +0 -21
  40. package/node_modules/@syntro/design-system/dist/assets/syntrologie-logomark.svg +0 -10
  41. package/node_modules/@syntro/design-system/dist/index.d.ts +0 -8
  42. package/node_modules/@syntro/design-system/dist/index.d.ts.map +0 -1
  43. package/node_modules/@syntro/design-system/dist/index.js +0 -7
  44. package/node_modules/@syntro/design-system/dist/tailwind-preset.d.ts +0 -19
  45. package/node_modules/@syntro/design-system/dist/tailwind-preset.d.ts.map +0 -1
  46. package/node_modules/@syntro/design-system/dist/tailwind-preset.js +0 -453
  47. package/node_modules/@syntro/design-system/dist/tokens/colors.css +0 -464
  48. package/node_modules/@syntro/design-system/dist/tokens/colors.d.ts +0 -874
  49. package/node_modules/@syntro/design-system/dist/tokens/colors.d.ts.map +0 -1
  50. package/node_modules/@syntro/design-system/dist/tokens/colors.js +0 -564
  51. package/node_modules/@syntro/design-system/dist/tokens/effects.css +0 -43
  52. package/node_modules/@syntro/design-system/dist/tokens/effects.d.ts +0 -85
  53. package/node_modules/@syntro/design-system/dist/tokens/effects.d.ts.map +0 -1
  54. package/node_modules/@syntro/design-system/dist/tokens/effects.js +0 -77
  55. package/node_modules/@syntro/design-system/dist/tokens/index.d.ts +0 -10
  56. package/node_modules/@syntro/design-system/dist/tokens/index.d.ts.map +0 -1
  57. package/node_modules/@syntro/design-system/dist/tokens/index.js +0 -9
  58. package/node_modules/@syntro/design-system/package.json +0 -55
  59. package/node_modules/@syntro/design-system/src/assets/syntrologie-logo.svg +0 -21
  60. package/node_modules/@syntro/design-system/src/assets/syntrologie-logomark.svg +0 -10
  61. package/node_modules/@syntrologie/sdk-contracts/dist/index.d.ts +0 -129
  62. package/node_modules/@syntrologie/sdk-contracts/dist/index.js +0 -15
  63. package/node_modules/@syntrologie/sdk-contracts/dist/schemas.d.ts +0 -2225
  64. package/node_modules/@syntrologie/sdk-contracts/dist/schemas.js +0 -162
  65. package/node_modules/@syntrologie/sdk-contracts/package.json +0 -33
  66. package/node_modules/@syntrologie/shared-editor-ui/dist/cn.d.ts +0 -2
  67. package/node_modules/@syntrologie/shared-editor-ui/dist/cn.d.ts.map +0 -1
  68. package/node_modules/@syntrologie/shared-editor-ui/dist/cn.js +0 -3
  69. package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPicker.d.ts +0 -34
  70. package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPicker.d.ts.map +0 -1
  71. package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPicker.js +0 -158
  72. package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggle.d.ts +0 -7
  73. package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggle.d.ts.map +0 -1
  74. package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggle.js +0 -9
  75. package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLine.d.ts +0 -23
  76. package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLine.d.ts.map +0 -1
  77. package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLine.js +0 -40
  78. package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadge.d.ts +0 -7
  79. package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadge.d.ts.map +0 -1
  80. package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadge.js +0 -22
  81. package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSection.d.ts +0 -8
  82. package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSection.d.ts.map +0 -1
  83. package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSection.js +0 -9
  84. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButton.d.ts +0 -7
  85. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButton.d.ts.map +0 -1
  86. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButton.js +0 -4
  87. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBody.d.ts +0 -7
  88. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBody.d.ts.map +0 -1
  89. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBody.js +0 -4
  90. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCard.d.ts +0 -13
  91. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCard.d.ts.map +0 -1
  92. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCard.js +0 -15
  93. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooter.d.ts +0 -7
  94. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooter.d.ts.map +0 -1
  95. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooter.js +0 -4
  96. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeader.d.ts +0 -9
  97. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeader.d.ts.map +0 -1
  98. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeader.js +0 -4
  99. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInput.d.ts +0 -8
  100. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInput.d.ts.map +0 -1
  101. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInput.js +0 -8
  102. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayout.d.ts +0 -7
  103. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayout.d.ts.map +0 -1
  104. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayout.js +0 -4
  105. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShell.d.ts +0 -25
  106. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShell.d.ts.map +0 -1
  107. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShell.js +0 -379
  108. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelect.d.ts +0 -8
  109. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelect.d.ts.map +0 -1
  110. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelect.js +0 -8
  111. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextarea.d.ts +0 -8
  112. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextarea.d.ts.map +0 -1
  113. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextarea.js +0 -17
  114. package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlight.d.ts +0 -32
  115. package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlight.d.ts.map +0 -1
  116. package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlight.js +0 -85
  117. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyState.d.ts +0 -6
  118. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyState.d.ts.map +0 -1
  119. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyState.js +0 -4
  120. package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeader.d.ts +0 -8
  121. package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeader.d.ts.map +0 -1
  122. package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeader.js +0 -5
  123. package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourney.d.ts +0 -12
  124. package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourney.d.ts.map +0 -1
  125. package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourney.js +0 -40
  126. package/node_modules/@syntrologie/shared-editor-ui/dist/formatConditionLabel.d.ts +0 -26
  127. package/node_modules/@syntrologie/shared-editor-ui/dist/formatConditionLabel.d.ts.map +0 -1
  128. package/node_modules/@syntrologie/shared-editor-ui/dist/formatConditionLabel.js +0 -202
  129. package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useElementRect.d.ts +0 -8
  130. package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useElementRect.d.ts.map +0 -1
  131. package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useElementRect.js +0 -46
  132. package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useTriggerWhenStatus.d.ts +0 -24
  133. package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useTriggerWhenStatus.d.ts.map +0 -1
  134. package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useTriggerWhenStatus.js +0 -86
  135. package/node_modules/@syntrologie/shared-editor-ui/dist/index.d.ts +0 -34
  136. package/node_modules/@syntrologie/shared-editor-ui/dist/index.d.ts.map +0 -1
  137. package/node_modules/@syntrologie/shared-editor-ui/dist/index.js +0 -25
  138. package/node_modules/@syntrologie/shared-editor-ui/dist/utils/elementChainRecommender.d.ts +0 -37
  139. package/node_modules/@syntrologie/shared-editor-ui/dist/utils/elementChainRecommender.d.ts.map +0 -1
  140. package/node_modules/@syntrologie/shared-editor-ui/dist/utils/elementChainRecommender.js +0 -52
  141. package/node_modules/@syntrologie/shared-editor-ui/dist/utils/selectorGenerator.d.ts +0 -22
  142. package/node_modules/@syntrologie/shared-editor-ui/dist/utils/selectorGenerator.d.ts.map +0 -1
  143. package/node_modules/@syntrologie/shared-editor-ui/dist/utils/selectorGenerator.js +0 -143
  144. package/node_modules/@syntrologie/shared-editor-ui/package.json +0 -45
@@ -1 +0,0 @@
1
- {"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/tokens/colors.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,eAAO,MAAM,IAAI;;;CAGP,CAAC;AAMX,eAAO,MAAM,KAAK;;;;;;;;;;;CAWR,CAAC;AAMX,eAAO,MAAM,SAAS;;;;;;;;;;;;;;CAcZ,CAAC;AAMX,eAAO,MAAM,KAAK;;;;;;;;;;;CAWR,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;;;;CAWT,CAAC;AAEX,eAAO,MAAM,GAAG;;;;;;;;;;;CAWN,CAAC;AAEX,eAAO,MAAM,IAAI;;;;;;;;;;;CAWP,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;;;;CAWT,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;;;;CAWT,CAAC;AAEX,eAAO,MAAM,IAAI;;;;;;;;;;;CAWP,CAAC;AAMX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CT,CAAC;AAMX,eAAO,MAAM,IAAI;;;;CAIP,CAAC;AAMX,eAAO,MAAM,UAAU;;;CAGb,CAAC;AAMX,eAAO,MAAM,MAAM;;;CAGT,CAAC;AAMX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BT,CAAC;AAMX,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgER,CAAC;AAMX,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;CAgBd,CAAC;AAMX,eAAO,MAAM,KAAK;;;;;;;;;;;;;CAaR,CAAC;AAMX,eAAO,MAAM,GAAG;;;;CAIN,CAAC;AAMX,eAAO,MAAM,IAAI;;;;CAIP,CAAC;AAMX,eAAO,MAAM,aAAa;;;;;;;;CAQhB,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAab,CAAC;AAMX,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAC;AAMX,eAAO,MAAM,QAAQ;;;;;;;;;;;;;CAaX,CAAC;AAMX,eAAO,MAAM,MAAM;;;CAGT,CAAC;AAMX,eAAO,MAAM,iBAAiB;;;CAGpB,CAAC;AAMX,eAAO,MAAM,IAAI;;;;CAIP,CAAC;AAMX,eAAO,MAAM,OAAO;;;;;;;;CAQV,CAAC;AAMX,eAAO,MAAM,KAAK;;;;CAIR,CAAC;AAMX,eAAO,MAAM,GAAG;;;;;CAKN,CAAC;AAMX,eAAO,MAAM,KAAK;;;;;;;;;;;;;CAaR,CAAC;AAMX,eAAO,MAAM,WAAW;;;;;;;CAOd,CAAC;AAMX,eAAO,MAAM,gBAAgB;;;CAGnB,CAAC;AAMX,eAAO,MAAM,UAAU;;;;;;;;CAQb,CAAC;AAMX,eAAO,MAAM,MAAM,WAAe,CAAC;AAMnC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCT,CAAC;AAEX,eAAe,MAAM,CAAC"}
@@ -1,564 +0,0 @@
1
- /**
2
- * Syntro Design System - Color Tokens
3
- *
4
- * This file contains all color tokens from the Figma design system.
5
- * Colors are organized by scale and semantic meaning.
6
- *
7
- * @see https://www.figma.com/design/U0Ol5vM7FQvgPfIgCAgxgb/Design-System
8
- */
9
- // ============================================================================
10
- // BASE COLORS
11
- // ============================================================================
12
- export const base = {
13
- white: '#ffffff',
14
- black: '#000000',
15
- };
16
- // ============================================================================
17
- // BRAND COLORS
18
- // ============================================================================
19
- export const brand = {
20
- 0: '#2c0b0a',
21
- 1: '#5b1715',
22
- 2: '#89221f',
23
- 3: '#b72e2a',
24
- 4: '#d44844',
25
- 5: '#dd6d69',
26
- 6: '#e5918f',
27
- 7: '#eeb6b4',
28
- 8: '#f6dada',
29
- 9: '#faebea',
30
- };
31
- // ============================================================================
32
- // NEUTRAL COLORS
33
- // ============================================================================
34
- export const slateGrey = {
35
- 0: '#07080a',
36
- 1: '#0f1318',
37
- 2: '#0e1114',
38
- 3: '#1c222a',
39
- 4: '#2b333f',
40
- 5: '#394454',
41
- 6: '#475569',
42
- 7: '#677384',
43
- 8: '#87919f',
44
- 9: '#a8afba',
45
- 10: '#cbd0d7',
46
- 11: '#e8eaee',
47
- 12: '#f6f7f9',
48
- };
49
- // ============================================================================
50
- // SEMANTIC COLOR SCALES
51
- // ============================================================================
52
- export const green = {
53
- 0: '#07230a',
54
- 1: '#0e4514',
55
- 2: '#16681e',
56
- 3: '#1d8a28',
57
- 4: '#24ad32',
58
- 5: '#4fbd5a',
59
- 6: '#7acd82',
60
- 7: '#a5deab',
61
- 8: '#d0eed3',
62
- 9: '#e5f6e7',
63
- };
64
- export const yellow = {
65
- 0: '#301f09',
66
- 1: '#5f3e12',
67
- 2: '#8f5e1b',
68
- 3: '#be7d24',
69
- 4: '#ee9c2d',
70
- 5: '#f1b057',
71
- 6: '#f5c481',
72
- 7: '#f8d7ab',
73
- 8: '#fcebd5',
74
- 9: '#fdf5ea',
75
- };
76
- export const red = {
77
- 0: '#330707',
78
- 1: '#660f0e',
79
- 2: '#991616',
80
- 3: '#cc1e1d',
81
- 4: '#ff2524',
82
- 5: '#ff5150',
83
- 6: '#ff7c7c',
84
- 7: '#ffa8a7',
85
- 8: '#ffd3d3',
86
- 9: '#ffe9e9',
87
- };
88
- export const blue = {
89
- 0: '#051533',
90
- 1: '#0a2a66',
91
- 2: '#0f3f98',
92
- 3: '#1454cb',
93
- 4: '#1969fe',
94
- 5: '#4787fe',
95
- 6: '#75a5fe',
96
- 7: '#a3c3ff',
97
- 8: '#d1e1ff',
98
- 9: '#e8f0ff',
99
- };
100
- export const orange = {
101
- 0: '#662500',
102
- 1: '#993d00',
103
- 2: '#cc5800',
104
- 3: '#ff7700',
105
- 4: '#fea85d',
106
- 5: '#fec58f',
107
- 6: '#ffd6ae',
108
- 7: '#fee6cd',
109
- 8: '#fff1e1',
110
- 9: '#fff8f0',
111
- };
112
- export const purple = {
113
- 0: '#151229',
114
- 1: '#2a2452',
115
- 2: '#40357c',
116
- 3: '#5547a5',
117
- 4: '#6a59ce',
118
- 5: '#887ad8',
119
- 6: '#a69be2',
120
- 7: '#c3bdeb',
121
- 8: '#e1def5',
122
- 9: '#f0eefa',
123
- };
124
- export const pink = {
125
- 0: '#37091f',
126
- 1: '#69123c',
127
- 2: '#9b1c58',
128
- 3: '#cd2575',
129
- 4: '#ff2e92',
130
- 5: '#ff58a8',
131
- 6: '#ff82be',
132
- 7: '#ffabd3',
133
- 8: '#ffd5e9',
134
- 9: '#ffeaf4',
135
- };
136
- // ============================================================================
137
- // LEGACY COLORS (Being phased out)
138
- // ============================================================================
139
- export const legacy = {
140
- aqua: {
141
- 0: '#0c5f8d',
142
- 1: '#146b99',
143
- 2: '#1d78a6',
144
- 3: '#2e89b6',
145
- 4: '#4a9fc4',
146
- 5: '#6bb4d1',
147
- 6: '#93cce0',
148
- 7: '#bddff0',
149
- 8: '#dceef8',
150
- 9: '#f2f8fc',
151
- },
152
- violet: {
153
- 0: '#6927da',
154
- 1: '#7839ee',
155
- 2: '#875bf7',
156
- 3: '#a48afb',
157
- 4: '#c3b4fd',
158
- 5: '#ddd6fe',
159
- 6: '#ece9fe',
160
- 7: '#f5f3ff',
161
- 8: '#fbfaff',
162
- },
163
- fuchsia: {
164
- 0: '#9f1ab1',
165
- 1: '#ba24d5',
166
- 2: '#d444f1',
167
- 3: '#e478fa',
168
- 4: '#eeaafd',
169
- 5: '#f6d0fe',
170
- 6: '#fbe8ff',
171
- 7: '#fdf4ff',
172
- 8: '#fefaff',
173
- },
174
- pink: {
175
- 0: '#a10f5f',
176
- 1: '#dd2590',
177
- 2: '#ee46bc',
178
- 3: '#f670c7',
179
- 4: '#faa7e0',
180
- 5: '#fcceee',
181
- 6: '#fce7f6',
182
- 7: '#fdf2fa',
183
- 8: '#fef6fb',
184
- },
185
- };
186
- // ============================================================================
187
- // TEXT TOKENS
188
- // ============================================================================
189
- export const text = {
190
- primary: slateGrey[10],
191
- secondary: slateGrey[9],
192
- tertiary: slateGrey[8],
193
- };
194
- // ============================================================================
195
- // BACKGROUND TOKENS
196
- // ============================================================================
197
- export const background = {
198
- primary: slateGrey[2],
199
- secondary: slateGrey[0],
200
- };
201
- // ============================================================================
202
- // BORDER TOKENS
203
- // ============================================================================
204
- export const border = {
205
- primary: slateGrey[4],
206
- secondary: slateGrey[3],
207
- };
208
- // ============================================================================
209
- // BUTTON TOKENS
210
- // ============================================================================
211
- export const button = {
212
- primary: {
213
- text: base.white,
214
- icon: base.white,
215
- border: brand[3],
216
- backgroundDefault: brand[3],
217
- backgroundHover: brand[2],
218
- },
219
- neutral: {
220
- text: slateGrey[10],
221
- textHover: base.white,
222
- icon: slateGrey[10],
223
- iconHover: base.white,
224
- border: slateGrey[4],
225
- background: slateGrey[2],
226
- },
227
- link: {
228
- text: base.white,
229
- icon: base.white,
230
- hover: brand[5],
231
- },
232
- error: {
233
- text: red[5],
234
- hover: red[6],
235
- },
236
- success: {
237
- text: green[5],
238
- hover: green[6],
239
- },
240
- };
241
- // ============================================================================
242
- // BADGE TOKENS
243
- // ============================================================================
244
- export const badge = {
245
- slateGrey: {
246
- content: slateGrey[10],
247
- pillOutline: slateGrey[10],
248
- borderPrimary: slateGrey[5],
249
- borderSecondary: slateGrey[5],
250
- background: slateGrey[3],
251
- },
252
- brand: {
253
- content: brand[9],
254
- pillOutline: brand[9],
255
- borderPrimary: brand[6],
256
- borderSecondary: brand[6],
257
- background: brand[0],
258
- },
259
- red: {
260
- content: red[8],
261
- pillOutline: red[4],
262
- borderPrimary: red[2],
263
- borderSecondary: red[2],
264
- background: red[0],
265
- },
266
- yellow: {
267
- content: yellow[8],
268
- pillOutline: yellow[4],
269
- borderPrimary: yellow[2],
270
- borderSecondary: yellow[2],
271
- background: yellow[0],
272
- },
273
- green: {
274
- content: green[8],
275
- pillOutline: green[4],
276
- borderPrimary: green[2],
277
- borderSecondary: green[2],
278
- background: green[0],
279
- },
280
- purple: {
281
- content: purple[8],
282
- pillOutline: purple[4],
283
- borderPrimary: purple[2],
284
- borderSecondary: purple[2],
285
- background: purple[0],
286
- },
287
- blue: {
288
- content: blue[8],
289
- pillOutline: blue[4],
290
- borderPrimary: blue[2],
291
- borderSecondary: blue[2],
292
- background: blue[0],
293
- },
294
- orange: {
295
- content: orange[8],
296
- pillOutline: orange[4],
297
- borderPrimary: orange[2],
298
- borderSecondary: orange[2],
299
- background: orange[0],
300
- },
301
- pink: {
302
- content: pink[8],
303
- pillOutline: pink[4],
304
- borderPrimary: pink[2],
305
- borderSecondary: pink[2],
306
- background: pink[0],
307
- },
308
- };
309
- // ============================================================================
310
- // BADGE BANNER TOKENS
311
- // ============================================================================
312
- export const badgeBanner = {
313
- green: {
314
- content: green[8],
315
- border: green[2],
316
- background: green[0],
317
- },
318
- yellow: {
319
- content: yellow[8],
320
- border: yellow[2],
321
- background: yellow[0],
322
- },
323
- red: {
324
- content: red[8],
325
- border: red[2],
326
- background: red[0],
327
- },
328
- };
329
- // ============================================================================
330
- // ALERT TOKENS
331
- // ============================================================================
332
- export const alert = {
333
- green: {
334
- content: green[1],
335
- background: green[9],
336
- },
337
- yellow: {
338
- content: yellow[1],
339
- background: yellow[9],
340
- },
341
- red: {
342
- content: red[1],
343
- background: red[9],
344
- },
345
- };
346
- // ============================================================================
347
- // TAG TOKENS
348
- // ============================================================================
349
- export const tag = {
350
- content: slateGrey[10],
351
- border: slateGrey[4],
352
- background: '#1c2124',
353
- };
354
- // ============================================================================
355
- // MENU TOKENS
356
- // ============================================================================
357
- export const menu = {
358
- backgroundDefault: slateGrey[2],
359
- backgroundHover: slateGrey[1],
360
- selected: slateGrey[3],
361
- };
362
- // ============================================================================
363
- // INPUT/DROPDOWN TOKENS
364
- // ============================================================================
365
- export const inputDropdown = {
366
- background: slateGrey[2],
367
- icon: slateGrey[10],
368
- borderDefault: slateGrey[4],
369
- borderSelected: brand[3],
370
- textLabel: slateGrey[9],
371
- textPlaceholder: slateGrey[8],
372
- textHint: slateGrey[8],
373
- };
374
- export const inputField = {
375
- backgroundDefault: slateGrey[2],
376
- backgroundDisabled: slateGrey[0],
377
- textLabel: slateGrey[9],
378
- textPlaceholder: slateGrey[8],
379
- textHint: slateGrey[8],
380
- textError: red[5],
381
- iconDefault: slateGrey[9],
382
- iconPlaceholder: slateGrey[10],
383
- iconError: red[5],
384
- borderDefault: slateGrey[4],
385
- borderSelected: brand[3],
386
- borderError: red[5],
387
- };
388
- // ============================================================================
389
- // TOGGLE TOKENS
390
- // ============================================================================
391
- export const toggle = {
392
- handleDefault: base.white,
393
- handleDisabled: slateGrey[10],
394
- off: {
395
- backgroundDefault: slateGrey[4],
396
- backgroundHover: slateGrey[5],
397
- backgroundDisabled: slateGrey[4],
398
- },
399
- on: {
400
- backgroundDefault: green[3],
401
- backgroundHover: green[2],
402
- backgroundDisabled: slateGrey[4],
403
- },
404
- };
405
- // ============================================================================
406
- // CHECKBOX TOKENS
407
- // ============================================================================
408
- export const checkbox = {
409
- off: {
410
- backgroundDefault: '#00000000',
411
- backgroundHover: slateGrey[5],
412
- backgroundDisabled: slateGrey[2],
413
- border: slateGrey[6],
414
- },
415
- on: {
416
- backgroundDefault: green[0],
417
- backgroundHover: green[1],
418
- backgroundDisabled: slateGrey[2],
419
- border: green[3],
420
- },
421
- };
422
- // ============================================================================
423
- // AVATAR TOKENS
424
- // ============================================================================
425
- export const avatar = {
426
- content: slateGrey[10],
427
- background: slateGrey[4],
428
- };
429
- // ============================================================================
430
- // PROGRESS BAR & SLIDER TOKENS
431
- // ============================================================================
432
- export const progressBarSlider = {
433
- background: slateGrey[4],
434
- active: green[3],
435
- };
436
- // ============================================================================
437
- // CARD TOKENS
438
- // ============================================================================
439
- export const card = {
440
- background: slateGrey[1],
441
- content: slateGrey[9],
442
- border: slateGrey[4],
443
- };
444
- // ============================================================================
445
- // SIDEBAR TOKENS
446
- // ============================================================================
447
- export const sidebar = {
448
- backgroundDefault: slateGrey[1],
449
- backgroundHover: slateGrey[3],
450
- backgroundActive: slateGrey[4],
451
- border: slateGrey[4],
452
- contentPrimary: slateGrey[10],
453
- contentSecondary: slateGrey[9],
454
- contentTertiary: slateGrey[8],
455
- };
456
- // ============================================================================
457
- // MODAL TOKENS
458
- // ============================================================================
459
- export const modal = {
460
- background: slateGrey[1],
461
- content: slateGrey[9],
462
- border: slateGrey[4],
463
- };
464
- // ============================================================================
465
- // TAB TOKENS
466
- // ============================================================================
467
- export const tab = {
468
- activeBackground: slateGrey[3],
469
- activeContent: brand[5],
470
- inactiveContent: slateGrey[9],
471
- border: slateGrey[4],
472
- };
473
- // ============================================================================
474
- // TABLE TOKENS
475
- // ============================================================================
476
- export const table = {
477
- header: {
478
- textDefault: slateGrey[9],
479
- textHover: slateGrey[8],
480
- backgroundDefault: slateGrey[1],
481
- },
482
- border: slateGrey[4],
483
- cell: {
484
- textPrimary: slateGrey[10],
485
- textSecondary: slateGrey[9],
486
- backgroundDefault: slateGrey[2],
487
- backgroundHover: slateGrey[1],
488
- },
489
- };
490
- // ============================================================================
491
- // BREADCRUMBS TOKENS
492
- // ============================================================================
493
- export const breadcrumbs = {
494
- textPrimaryDefault: slateGrey[10],
495
- textPrimaryHover: slateGrey[10],
496
- textSecondaryDefault: slateGrey[8],
497
- textSecondaryHover: slateGrey[9],
498
- iconPrimary: slateGrey[10],
499
- iconSecondary: slateGrey[8],
500
- };
501
- // ============================================================================
502
- // LOADING INDICATOR TOKENS
503
- // ============================================================================
504
- export const loadingIndicator = {
505
- background: green[1],
506
- active: green[5],
507
- };
508
- // ============================================================================
509
- // DATE PICKER TOKENS
510
- // ============================================================================
511
- export const datePicker = {
512
- textDefault: slateGrey[10],
513
- textSelected: base.white,
514
- textDisabled: slateGrey[7],
515
- backgroundDefault: slateGrey[2],
516
- backgroundMiddle: slateGrey[3],
517
- backgroundSelected: brand[3],
518
- border: slateGrey[4],
519
- };
520
- // ============================================================================
521
- // MISC TOKENS
522
- // ============================================================================
523
- export const scroll = slateGrey[9];
524
- // ============================================================================
525
- // EXPORTS
526
- // ============================================================================
527
- export const colors = {
528
- base,
529
- brand,
530
- slateGrey,
531
- green,
532
- yellow,
533
- red,
534
- blue,
535
- orange,
536
- purple,
537
- pink,
538
- legacy,
539
- text,
540
- background,
541
- border,
542
- button,
543
- badge,
544
- badgeBanner,
545
- alert,
546
- tag,
547
- menu,
548
- inputDropdown,
549
- inputField,
550
- toggle,
551
- checkbox,
552
- avatar,
553
- progressBarSlider,
554
- card,
555
- sidebar,
556
- modal,
557
- tab,
558
- table,
559
- breadcrumbs,
560
- loadingIndicator,
561
- datePicker,
562
- scroll,
563
- };
564
- export default colors;
@@ -1,43 +0,0 @@
1
- /**
2
- * Syntro Design System - Effect CSS Variables
3
- *
4
- * Import this file in your application to use effect tokens as CSS custom properties.
5
- * Usage: box-shadow: var(--syntro-shadow-md);
6
- *
7
- * @see https://www.figma.com/design/U0Ol5vM7FQvgPfIgCAgxgb/Design-System
8
- */
9
-
10
- :root {
11
- /* ========================================================================== */
12
- /* SHADOW SCALE */
13
- /* ========================================================================== */
14
- --syntro-shadow-xs: 0 1px 2px 0 rgba(16,24,40,0.05);
15
- --syntro-shadow-sm: 0 1px 3px 0 rgba(16,24,40,0.10), 0 1px 2px -1px rgba(16,24,40,0.10);
16
- --syntro-shadow-md: 0 4px 6px -1px rgba(16,24,40,0.10), 0 2px 4px -2px rgba(16,24,40,0.10);
17
- --syntro-shadow-lg: 0 10px 15px -3px rgba(16,24,40,0.10), 0 4px 6px -4px rgba(16,24,40,0.10);
18
- --syntro-shadow-xl: 0 20px 25px -5px rgba(16,24,40,0.10), 0 8px 10px -6px rgba(16,24,40,0.10);
19
- --syntro-shadow-2xl: 0 25px 50px -12px rgba(16,24,40,0.25);
20
- --syntro-shadow-3xl: 0 35px 60px -15px rgba(16,24,40,0.35);
21
- --syntro-shadow-inner: inset 0 2px 4px 0 rgba(16,24,40,0.05);
22
-
23
- /* ========================================================================== */
24
- /* FOCUS RINGS */
25
- /* ========================================================================== */
26
- --syntro-focus-ring-primary: 0 0 0 4px rgba(221,109,105,0.25), 0 1px 2px 0 rgba(16,24,40,0.05);
27
- --syntro-focus-ring-neutral: 0 0 0 4px rgba(135,145,159,0.25), 0 1px 2px 0 rgba(16,24,40,0.05);
28
- --syntro-focus-ring-error: 0 0 0 4px rgba(255,81,80,0.25), 0 1px 2px 0 rgba(16,24,40,0.05);
29
-
30
- /* ========================================================================== */
31
- /* BACKDROP BLUR */
32
- /* ========================================================================== */
33
- --syntro-backdrop-blur-sm: 8px;
34
- --syntro-backdrop-blur-md: 16px;
35
- --syntro-backdrop-blur-lg: 24px;
36
- --syntro-backdrop-blur-xl: 40px;
37
-
38
- /* ========================================================================== */
39
- /* OVERLAY */
40
- /* ========================================================================== */
41
- --syntro-overlay-solid: rgba(0,0,0,0.70);
42
- --syntro-overlay-blur: rgba(0,0,0,0.25);
43
- }
@@ -1,85 +0,0 @@
1
- /**
2
- * Syntro Design System - Effect Tokens
3
- *
4
- * Non-color effect tokens from the Figma design system:
5
- * shadows, focus rings, backdrop blurs, and overlays.
6
- *
7
- * @see https://www.figma.com/design/U0Ol5vM7FQvgPfIgCAgxgb/Design-System
8
- */
9
- /**
10
- * Figma shadow scale using rgba(16,24,40,...) base.
11
- * Each step increases vertical offset and blur radius.
12
- */
13
- export declare const shadows: {
14
- readonly xs: "0 1px 2px 0 rgba(16,24,40,0.05)";
15
- readonly sm: "0 1px 3px 0 rgba(16,24,40,0.10), 0 1px 2px -1px rgba(16,24,40,0.10)";
16
- readonly md: "0 4px 6px -1px rgba(16,24,40,0.10), 0 2px 4px -2px rgba(16,24,40,0.10)";
17
- readonly lg: "0 10px 15px -3px rgba(16,24,40,0.10), 0 4px 6px -4px rgba(16,24,40,0.10)";
18
- readonly xl: "0 20px 25px -5px rgba(16,24,40,0.10), 0 8px 10px -6px rgba(16,24,40,0.10)";
19
- readonly '2xl': "0 25px 50px -12px rgba(16,24,40,0.25)";
20
- readonly '3xl': "0 35px 60px -15px rgba(16,24,40,0.35)";
21
- readonly inner: "inset 0 2px 4px 0 rgba(16,24,40,0.05)";
22
- readonly none: "none";
23
- };
24
- /**
25
- * Focus ring shadows — 4px spread + xs shadow for depth.
26
- * Used via `shadow-focus-primary`, `shadow-focus-neutral`, `shadow-focus-error`.
27
- *
28
- * Colors reference design system color tokens:
29
- * primary → brand-5 (#dd6d69)
30
- * neutral → slateGrey-8 (#87919f)
31
- * error → red-5 (#ff5150)
32
- */
33
- export declare const focusRings: {
34
- readonly primary: "0 0 0 4px rgba(221,109,105,0.25), 0 1px 2px 0 rgba(16,24,40,0.05)";
35
- readonly neutral: "0 0 0 4px rgba(135,145,159,0.25), 0 1px 2px 0 rgba(16,24,40,0.05)";
36
- readonly error: "0 0 0 4px rgba(255,81,80,0.25), 0 1px 2px 0 rgba(16,24,40,0.05)";
37
- };
38
- /**
39
- * Figma backdrop blur scale.
40
- */
41
- export declare const backdropBlur: {
42
- readonly sm: "8px";
43
- readonly md: "16px";
44
- readonly lg: "24px";
45
- readonly xl: "40px";
46
- };
47
- /**
48
- * Modal/dialog overlay backgrounds.
49
- * solid → full-screen scrim (opaque)
50
- * blur → lighter scrim intended to pair with backdrop-blur
51
- */
52
- export declare const overlay: {
53
- readonly solid: "rgba(0,0,0,0.70)";
54
- readonly blur: "rgba(0,0,0,0.25)";
55
- };
56
- export declare const effects: {
57
- readonly shadows: {
58
- readonly xs: "0 1px 2px 0 rgba(16,24,40,0.05)";
59
- readonly sm: "0 1px 3px 0 rgba(16,24,40,0.10), 0 1px 2px -1px rgba(16,24,40,0.10)";
60
- readonly md: "0 4px 6px -1px rgba(16,24,40,0.10), 0 2px 4px -2px rgba(16,24,40,0.10)";
61
- readonly lg: "0 10px 15px -3px rgba(16,24,40,0.10), 0 4px 6px -4px rgba(16,24,40,0.10)";
62
- readonly xl: "0 20px 25px -5px rgba(16,24,40,0.10), 0 8px 10px -6px rgba(16,24,40,0.10)";
63
- readonly '2xl': "0 25px 50px -12px rgba(16,24,40,0.25)";
64
- readonly '3xl': "0 35px 60px -15px rgba(16,24,40,0.35)";
65
- readonly inner: "inset 0 2px 4px 0 rgba(16,24,40,0.05)";
66
- readonly none: "none";
67
- };
68
- readonly focusRings: {
69
- readonly primary: "0 0 0 4px rgba(221,109,105,0.25), 0 1px 2px 0 rgba(16,24,40,0.05)";
70
- readonly neutral: "0 0 0 4px rgba(135,145,159,0.25), 0 1px 2px 0 rgba(16,24,40,0.05)";
71
- readonly error: "0 0 0 4px rgba(255,81,80,0.25), 0 1px 2px 0 rgba(16,24,40,0.05)";
72
- };
73
- readonly backdropBlur: {
74
- readonly sm: "8px";
75
- readonly md: "16px";
76
- readonly lg: "24px";
77
- readonly xl: "40px";
78
- };
79
- readonly overlay: {
80
- readonly solid: "rgba(0,0,0,0.70)";
81
- readonly blur: "rgba(0,0,0,0.25)";
82
- };
83
- };
84
- export default effects;
85
- //# sourceMappingURL=effects.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"effects.d.ts","sourceRoot":"","sources":["../../src/tokens/effects.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH;;;GAGG;AACH,eAAO,MAAM,OAAO;;;;;;;;;;CAUV,CAAC;AAMX;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU;;;;CAIb,CAAC;AAMX;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AAMX;;;;GAIG;AACH,eAAO,MAAM,OAAO;;;CAGV,CAAC;AAMX,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKV,CAAC;AAEX,eAAe,OAAO,CAAC"}