superdesk-ui-framework 7.0.0-dev-hg0 → 7.0.0-dev-hg2

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 (195) hide show
  1. package/app/fonts/sd_big-icons.eot +0 -0
  2. package/app/fonts/sd_big-icons.svg +69 -0
  3. package/app/fonts/sd_big-icons.ttf +0 -0
  4. package/app/fonts/sd_big-icons.woff +0 -0
  5. package/app/fonts/sd_icons.eot +0 -0
  6. package/app/fonts/sd_icons.svg +202 -0
  7. package/app/fonts/sd_icons.ttf +0 -0
  8. package/app/fonts/sd_icons.woff +0 -0
  9. package/app/img/AvatarDefaultImage.svg +6 -0
  10. package/app/img/DotsSmall-dark.svg +14 -0
  11. package/app/img/OneDot.svg +3 -0
  12. package/app/img/SD-logo.svg +52 -0
  13. package/app/img/dots.svg +3 -0
  14. package/app/img/empty_states/empty-state--large-1.svg +221 -0
  15. package/app/img/empty_states/empty-state--large-2.svg +207 -0
  16. package/app/img/empty_states/empty-state--large-3.svg +231 -0
  17. package/app/img/empty_states/empty-state--large-dashboard.svg +642 -0
  18. package/app/img/empty_states/empty-state--small-1.svg +112 -0
  19. package/app/img/empty_states/empty-state--small-2.svg +49 -0
  20. package/app/img/empty_states/empty-state--small-3.svg +47 -0
  21. package/app/img/icon_illustrations/IconIllustration__headlines.svg +25 -0
  22. package/app/img/icon_illustrations/IconIllustration__keywords.svg +46 -0
  23. package/app/img/icon_illustrations/IconIllustration__optimise.svg +38 -0
  24. package/app/img/icon_illustrations/IconIllustration__summary.svg +27 -0
  25. package/app/img/icon_illustrations/IconIllustration__translate.svg +12 -0
  26. package/app/img/icon_image_stack--white.svg +16 -0
  27. package/app/img/icon_image_stack.svg +16 -0
  28. package/app/img/spinner.svg +3 -0
  29. package/app/img/spinning-wheel.gif +0 -0
  30. package/app/img/theme-thumbnail.png +0 -0
  31. package/app/img/themes/theme-base.svg +1 -0
  32. package/app/img/themes/theme-contrast.svg +45 -0
  33. package/app/img/themes/theme-dark.svg +1 -0
  34. package/app/img/themes/theme-light.svg +1 -0
  35. package/app/img/three-dots.svg +33 -0
  36. package/app/styles/_accessibility.scss +358 -0
  37. package/app/styles/_alerts.scss +392 -0
  38. package/app/styles/_animations.scss +73 -0
  39. package/app/styles/_avatar.scss +526 -0
  40. package/app/styles/_badge.scss +106 -0
  41. package/app/styles/_big-icon-font.scss +182 -0
  42. package/app/styles/_boxed-list.scss +284 -0
  43. package/app/styles/_buttons.scss +874 -0
  44. package/app/styles/_carousel.scss +232 -0
  45. package/app/styles/_content-divider.scss +233 -0
  46. package/app/styles/_design-tokens.scss +6 -0
  47. package/app/styles/_drag-drop.scss +26 -0
  48. package/app/styles/_drag-handle.scss +48 -0
  49. package/app/styles/_empty-states.scss +81 -0
  50. package/app/styles/_expand-button.scss +31 -0
  51. package/app/styles/_hamburger.scss +160 -0
  52. package/app/styles/_helpers.scss +2220 -0
  53. package/app/styles/_icon-font.scss +488 -0
  54. package/app/styles/_icon-labels.scss +140 -0
  55. package/app/styles/_labels.scss +184 -0
  56. package/app/styles/_loaders.scss +29 -0
  57. package/app/styles/_master-desk.scss +323 -0
  58. package/app/styles/_mixins.scss +164 -0
  59. package/app/styles/_modals.scss +452 -0
  60. package/app/styles/_normalize.scss +466 -0
  61. package/app/styles/_panel-info.scss +48 -0
  62. package/app/styles/_popover.scss +29 -0
  63. package/app/styles/_pr-superdesk-theme.scss +4 -0
  64. package/app/styles/_publisher-styles.scss +195 -0
  65. package/app/styles/_reboot.scss +65 -0
  66. package/app/styles/_sd-tag-input.scss +715 -0
  67. package/app/styles/_simple-list.scss +158 -0
  68. package/app/styles/_spinner.scss +47 -0
  69. package/app/styles/_table-list.scss +385 -0
  70. package/app/styles/_tables.scss +150 -0
  71. package/app/styles/_tabs-vertical.scss +58 -0
  72. package/app/styles/_tabs.scss +232 -0
  73. package/app/styles/_tag-labels.scss +210 -0
  74. package/app/styles/_thumb-carousel.scss +247 -0
  75. package/app/styles/_time.scss +113 -0
  76. package/app/styles/_toggle-box.scss +175 -0
  77. package/app/styles/_toggle-button.scss +46 -0
  78. package/app/styles/_tooltips.scss +431 -0
  79. package/app/styles/_variables.scss +4 -0
  80. package/app/styles/app.scss +127 -0
  81. package/app/styles/components/_calendar-week-day.scss +99 -0
  82. package/app/styles/components/_card-item.scss +586 -0
  83. package/app/styles/components/_list-item.scss +694 -0
  84. package/app/styles/components/_load-more-indicator.scss +15 -0
  85. package/app/styles/components/_overflow-stack.scss +120 -0
  86. package/app/styles/components/_sd-circular-progress.scss +239 -0
  87. package/app/styles/components/_sd-collapse-box.scss +292 -0
  88. package/app/styles/components/_sd-comment-box.scss +42 -0
  89. package/app/styles/components/_sd-dropzone.scss +134 -0
  90. package/app/styles/components/_sd-editor-popup.scss +106 -0
  91. package/app/styles/components/_sd-grid-item.scss +865 -0
  92. package/app/styles/components/_sd-loader.scss +39 -0
  93. package/app/styles/components/_sd-media-carousel.scss +408 -0
  94. package/app/styles/components/_sd-notification-panel.scss +51 -0
  95. package/app/styles/components/_sd-pagination.scss +51 -0
  96. package/app/styles/components/_sd-photo-preview.scss +508 -0
  97. package/app/styles/components/_sd-searchbar.scss +276 -0
  98. package/app/styles/components/_sd-toaster.scss +226 -0
  99. package/app/styles/components/_subnav.scss +777 -0
  100. package/app/styles/components/_theme-selector.scss +221 -0
  101. package/app/styles/components/sd-slider.scss +125 -0
  102. package/app/styles/design-tokens/_brand-colors.scss +36 -0
  103. package/app/styles/design-tokens/_component-tokens.scss +11 -0
  104. package/app/styles/design-tokens/_design-tokens-general.scss +145 -0
  105. package/app/styles/design-tokens/_new-colors.scss +820 -0
  106. package/app/styles/design-tokens/_primitives.scss +161 -0
  107. package/app/styles/design-tokens/_semantic-colors.scss +161 -0
  108. package/app/styles/dropdowns/_basic-dropdown.scss +760 -0
  109. package/app/styles/dropdowns/_input-dropdown.scss +26 -0
  110. package/app/styles/dropdowns/_navigation_dropdown.scss +126 -0
  111. package/app/styles/dropdowns/_nested-dropdown.scss +95 -0
  112. package/app/styles/dropdowns/_other_dropdown.scss +59 -0
  113. package/app/styles/dropdowns/dropdown2.scss +4 -0
  114. package/app/styles/editor/_editor-buttons.scss +61 -0
  115. package/app/styles/editor/_editor-themes.scss +550 -0
  116. package/app/styles/form-elements/_autocomplete.scss +54 -0
  117. package/app/styles/form-elements/_checkbox.scss +770 -0
  118. package/app/styles/form-elements/_forms-general.scss +543 -0
  119. package/app/styles/form-elements/_input-preview.scss +80 -0
  120. package/app/styles/form-elements/_input-wrap.scss +147 -0
  121. package/app/styles/form-elements/_inputs.scss +1425 -0
  122. package/app/styles/form-elements/_radio.scss +65 -0
  123. package/app/styles/form-elements/_select-grid.scss +81 -0
  124. package/app/styles/form-elements/_switch.scss +109 -0
  125. package/app/styles/grids/_basic-grid.scss +206 -0
  126. package/app/styles/grids/_grid-layout.scss +1162 -0
  127. package/app/styles/grids/_layout-grid.scss +176 -0
  128. package/app/styles/grids/_sd-kanban-list.scss +92 -0
  129. package/app/styles/index.js +1 -0
  130. package/app/styles/interface-elements/_side-panel.scss +595 -0
  131. package/app/styles/layout/_basic-layout.scss +149 -0
  132. package/app/styles/layout/_container.scss +45 -0
  133. package/app/styles/layout/_editor.scss +464 -0
  134. package/app/styles/layout/_general.scss +92 -0
  135. package/app/styles/menus/_sd-bottom-tabs.scss +79 -0
  136. package/app/styles/menus/_sd-content-navigation.scss +50 -0
  137. package/app/styles/menus/_sd-left-navigation.scss +126 -0
  138. package/app/styles/menus/_sd-sidebar-menu.scss +465 -0
  139. package/app/styles/menus/_sd-top-menu.scss +105 -0
  140. package/app/styles/pr-superdesk-theme.scss +7 -0
  141. package/app/styles/primereact/_pr-autocomplete.scss +27 -0
  142. package/app/styles/primereact/_pr-datepicker.scss +288 -0
  143. package/app/styles/primereact/_pr-dialog.scss +399 -0
  144. package/app/styles/primereact/_pr-dropdown.scss +233 -0
  145. package/app/styles/primereact/_pr-general.scss +72 -0
  146. package/app/styles/primereact/_pr-menu.scss +60 -0
  147. package/app/styles/primereact/_pr-skeleton.scss +36 -0
  148. package/app/styles/primereact/_pr-tag-input.scss +66 -0
  149. package/app/styles/variables/_colors.scss +275 -0
  150. package/app/styles/variables/_dimensions.scss +89 -0
  151. package/app/styles/variables/_form-elements.scss +0 -0
  152. package/app/styles/variables/_typography.scss +20 -0
  153. package/dist/esm/components/EmptyState.d.ts.map +1 -1
  154. package/dist/esm/components/EmptyState.js +22 -1
  155. package/dist/esm/components/EmptyState.js.map +1 -1
  156. package/dist/fonts/sd_big-icons.eot +0 -0
  157. package/dist/fonts/sd_big-icons.svg +69 -0
  158. package/dist/fonts/sd_big-icons.ttf +0 -0
  159. package/dist/fonts/sd_big-icons.woff +0 -0
  160. package/dist/fonts/sd_icons.eot +0 -0
  161. package/dist/fonts/sd_icons.svg +202 -0
  162. package/dist/fonts/sd_icons.ttf +0 -0
  163. package/dist/fonts/sd_icons.woff +0 -0
  164. package/dist/img/AvatarDefaultImage.svg +6 -0
  165. package/dist/img/DotsSmall-dark.svg +14 -0
  166. package/dist/img/OneDot.svg +3 -0
  167. package/dist/img/SD-logo.svg +52 -0
  168. package/dist/img/dots.svg +3 -0
  169. package/dist/img/empty_states/empty-state--large-1.svg +221 -0
  170. package/dist/img/empty_states/empty-state--large-2.svg +207 -0
  171. package/dist/img/empty_states/empty-state--large-3.svg +231 -0
  172. package/dist/img/empty_states/empty-state--large-dashboard.svg +642 -0
  173. package/dist/img/empty_states/empty-state--small-1.svg +112 -0
  174. package/dist/img/empty_states/empty-state--small-2.svg +49 -0
  175. package/dist/img/empty_states/empty-state--small-3.svg +47 -0
  176. package/dist/img/icon_illustrations/IconIllustration__headlines.svg +25 -0
  177. package/dist/img/icon_illustrations/IconIllustration__keywords.svg +46 -0
  178. package/dist/img/icon_illustrations/IconIllustration__optimise.svg +38 -0
  179. package/dist/img/icon_illustrations/IconIllustration__summary.svg +27 -0
  180. package/dist/img/icon_illustrations/IconIllustration__translate.svg +12 -0
  181. package/dist/img/icon_image_stack--white.svg +16 -0
  182. package/dist/img/icon_image_stack.svg +16 -0
  183. package/dist/img/spinner.svg +3 -0
  184. package/dist/img/spinning-wheel.gif +0 -0
  185. package/dist/img/theme-thumbnail.png +0 -0
  186. package/dist/img/themes/theme-base.svg +1 -0
  187. package/dist/img/themes/theme-contrast.svg +45 -0
  188. package/dist/img/themes/theme-dark.svg +1 -0
  189. package/dist/img/themes/theme-light.svg +1 -0
  190. package/dist/img/three-dots.svg +33 -0
  191. package/dist/superdesk-ui.bundle.js +1 -1
  192. package/package.json +10 -3
  193. package/react/components/EmptyState.d.ts.map +1 -1
  194. package/react/components/EmptyState.js +22 -1
  195. package/react/components/EmptyState.js.map +1 -1
package/app/styles/design-tokens/_primitives.scss ADDED
@@ -0,0 +1,161 @@
1
+ :root {
2
+ // PRIMITIVES / COLORS
3
+ // These colors should not to be applied directly to elements and components
4
+ --l-base: 35%;
5
+ --l-100-add: 55;
6
+ --l-200-add: 34;
7
+ --l-300-add: 20;
8
+ --l-400-add: 8;
9
+ --l-600-remove: 10;
10
+ --l-700-remove: 20;
11
+ --l-800-remove: 35;
12
+
13
+ --c-base: 75;
14
+ --c-100-remove: 60;
15
+ --c-200-remove: 45;
16
+ --c-300-remove: 30;
17
+ --c-400-remove: 10;
18
+ --c-600-add: 0;
19
+ --c-700-add: 0;
20
+ --c-800-add: 0;
21
+
22
+ // Morocco Red
23
+ --morocco-red-500: lch(var(--l-base) var(--c-base) 28);
24
+ --morocco-red-100: lch(from var(--morocco-red-500) calc(l + var(--l-100-add)) calc(c - var(--c-100-remove)) h);
25
+ --morocco-red-200: lch(from var(--morocco-red-500) calc(l + var(--l-200-add)) calc(c - var(--c-200-remove)) h);
26
+ --morocco-red-300: lch(from var(--morocco-red-500) calc(l + var(--l-300-add)) calc(c - var(--c-300-remove)) h);
27
+ --morocco-red-400: lch(from var(--morocco-red-500) calc(l + var(--l-400-add)) calc(c - var(--c-400-remove)) h);
28
+ --morocco-red-600: lch(from var(--morocco-red-500) calc(l - var(--l-600-remove)) calc(c + var(--c-600-add)) h);
29
+ --morocco-red-700: lch(from var(--morocco-red-500) calc(l - var(--l-700-remove)) calc(c + var(--c-700-add)) h);
30
+ --morocco-red-800: lch(from var(--morocco-red-500) calc(l - var(--l-800-remove)) calc(c + var(--c-800-add)) h);
31
+ --morocco-red-500-a32: lch(from var(--morocco-red-500) l c h / .32);
32
+ --morocco-red-500-a24: lch(from var(--morocco-red-500) l c h / .24);
33
+ --morocco-red-500-a16: lch(from var(--morocco-red-500) l c h / .16);
34
+ --morocco-red-500-a12: lch(from var(--morocco-red-500) l c h / .12);
35
+ // Syrah Soil
36
+ --syrah-soil-500: lch(var(--l-base) var(--c-base) 74);
37
+ --syrah-soil-100: lch(from var(--syrah-soil-500) calc(l + var(--l-100-add)) calc(c - var(--c-100-remove)) h);
38
+ --syrah-soil-200: lch(from var(--syrah-soil-500) calc(l + var(--l-200-add)) calc(c - var(--c-200-remove)) h);
39
+ --syrah-soil-300: lch(from var(--syrah-soil-500) calc(l + var(--l-300-add)) calc(c - var(--c-300-remove)) h);
40
+ --syrah-soil-400: lch(from var(--syrah-soil-500) calc(l + var(--l-400-add)) calc(c - var(--c-400-remove)) h);
41
+ --syrah-soil-600: lch(from var(--syrah-soil-500) calc(l - var(--l-600-remove)) calc(c + var(--c-600-add)) h);
42
+ --syrah-soil-700: lch(from var(--syrah-soil-500) calc(l - var(--l-700-remove)) calc(c + var(--c-700-add)) h);
43
+ --syrah-soil-800: lch(from var(--syrah-soil-500) calc(l - var(--l-800-remove)) calc(c + var(--c-800-add)) h);
44
+ --syrah-soil-500-a32: hsl(from var(--syrah-soil-500) h s l / .32);
45
+ --syrah-soil-500-a24: hsl(from var(--syrah-soil-500) h s l / .24);
46
+ --syrah-soil-500-a16: hsl(from var(--syrah-soil-500) h s l / .16);
47
+ --syrah-soil-500-a12: hsl(from var(--syrah-soil-500) h s l / .12);
48
+ // Green Brier
49
+ --green-brier-500: lch(var(--l-base) var(--c-base) 126);
50
+ --green-brier-100: lch(from var(--green-brier-500) calc(l + var(--l-100-add)) calc(c - var(--c-100-remove)) h);
51
+ --green-brier-200: lch(from var(--green-brier-500) calc(l + var(--l-200-add)) calc(c - var(--c-200-remove)) h);
52
+ --green-brier-300: lch(from var(--green-brier-500) calc(l + var(--l-300-add)) calc(c - var(--c-300-remove)) h);
53
+ --green-brier-400: lch(from var(--green-brier-500) calc(l + var(--l-400-add)) calc(c - var(--c-400-remove)) h);
54
+ --green-brier-600: lch(from var(--green-brier-500) calc(l - var(--l-600-remove)) calc(c + var(--c-600-add)) h);
55
+ --green-brier-700: lch(from var(--green-brier-500) calc(l - var(--l-700-remove)) calc(c + var(--c-700-add)) h);
56
+ --green-brier-800: lch(from var(--green-brier-500) calc(l - var(--l-800-remove)) calc(c + var(--c-800-add)) h);
57
+ --green-brier-400-a32: hsl(from var(--green-brier-400) h s l / .32);
58
+ --green-brier-400-a24: hsl(from var(--green-brier-400) h s l / .24);
59
+ --green-brier-400-a16: hsl(from var(--green-brier-400) h s l / .16);
60
+ --green-brier-400-a12: hsl(from var(--green-brier-400) h s l / .12);
61
+ --green-brier-500-a32: hsl(from var(--green-brier-500) h s l / .32);
62
+ --green-brier-500-a24: hsl(from var(--green-brier-500) h s l / .24);
63
+ --green-brier-500-a16: hsl(from var(--green-brier-500) h s l / .16);
64
+ --green-brier-500-a12: hsl(from var(--green-brier-500) h s l / .12);
65
+ // Sorcerer Blue
66
+ --sorcerer-blue-500: lch(var(--l-base) var(--c-base) 202);
67
+ --sorcerer-blue-100: lch(from var(--sorcerer-blue-500) calc(l + var(--l-100-add)) calc(c - var(--c-100-remove)) h);
68
+ --sorcerer-blue-200: lch(from var(--sorcerer-blue-500) calc(l + var(--l-200-add)) calc(c - var(--c-200-remove)) h);
69
+ --sorcerer-blue-300: lch(from var(--sorcerer-blue-500) calc(l + var(--l-300-add)) calc(c - var(--c-300-remove)) h);
70
+ --sorcerer-blue-400: lch(from var(--sorcerer-blue-500) calc(l + var(--l-400-add)) calc(c - var(--c-400-remove)) h);
71
+ --sorcerer-blue-600: lch(from var(--sorcerer-blue-500) calc(l - var(--l-600-remove)) calc(c + var(--c-600-add)) h);
72
+ --sorcerer-blue-700: lch(from var(--sorcerer-blue-500) calc(l - var(--l-700-remove)) calc(c + var(--c-700-add)) h);
73
+ --sorcerer-blue-800: lch(from var(--sorcerer-blue-500) calc(l - var(--l-800-remove)) calc(c + var(--c-800-add)) h);
74
+ --sorcerer-blue-500-a32: hsl(from var(--sorcerer-blue-500) h s l / .32);
75
+ --sorcerer-blue-500-a24: hsl(from var(--sorcerer-blue-500) h s l / .24);
76
+ --sorcerer-blue-500-a16: hsl(from var(--sorcerer-blue-500) h s l / .16);
77
+ --sorcerer-blue-500-a12: hsl(from var(--sorcerer-blue-500) h s l / .12);
78
+ // Palatinate Blue
79
+ --palatinate-blue-500: lch(var(--l-base) var(--c-base) 280);
80
+ --palatinate-blue-100: lch(from var(--palatinate-blue-500) calc(l + var(--l-100-add)) calc(c - var(--c-100-remove)) h);
81
+ --palatinate-blue-200: lch(from var(--palatinate-blue-500) calc(l + var(--l-200-add)) calc(c - var(--c-200-remove)) h);
82
+ --palatinate-blue-300: lch(from var(--palatinate-blue-500) calc(l + var(--l-300-add)) calc(c - var(--c-300-remove)) h);
83
+ --palatinate-blue-400: lch(from var(--palatinate-blue-500) calc(l + var(--l-400-add)) calc(c - var(--c-400-remove)) h);
84
+ --palatinate-blue-600: lch(from var(--palatinate-blue-500) calc(l - var(--l-600-remove)) calc(c + var(--c-600-add)) h);
85
+ --palatinate-blue-700: lch(from var(--palatinate-blue-500) calc(l - var(--l-700-remove)) calc(c + var(--c-700-add)) h);
86
+ --palatinate-blue-800: lch(from var(--palatinate-blue-500) calc(l - var(--l-800-remove)) calc(c + var(--c-800-add)) h);
87
+ --palatinate-blue-500-a32: hsl(from var(--palatinate-blue-500) h s l / .32);
88
+ --palatinate-blue-500-a24: hsl(from var(--palatinate-blue-500) h s l / .24);
89
+ --palatinate-blue-500-a16: hsl(from var(--palatinate-blue-500) h s l / .16);
90
+ --palatinate-blue-500-a12: hsl(from var(--palatinate-blue-500) h s l / .12);
91
+ // Purple Spot
92
+ --purple-spot-500: lch(var(--l-base) var(--c-base) 307);
93
+ --purple-spot-100: lch(from var(--purple-spot-500) calc(l + var(--l-100-add)) calc(c - var(--c-100-remove)) h);
94
+ --purple-spot-200: lch(from var(--purple-spot-500) calc(l + var(--l-200-add)) calc(c - var(--c-200-remove)) h);
95
+ --purple-spot-300: lch(from var(--purple-spot-500) calc(l + var(--l-300-add)) calc(c - var(--c-300-remove)) h);
96
+ --purple-spot-400: lch(from var(--purple-spot-500) calc(l + var(--l-400-add)) calc(c - var(--c-400-remove)) h);
97
+ --purple-spot-600: lch(from var(--purple-spot-500) calc(l - var(--l-600-remove)) calc(c + var(--c-600-add)) h);
98
+ --purple-spot-700: lch(from var(--purple-spot-500) calc(l - var(--l-700-remove)) calc(c + var(--c-700-add)) h);
99
+ --purple-spot-800: lch(from var(--purple-spot-500) calc(l - var(--l-800-remove)) calc(c + var(--c-800-add)) h);
100
+ --purple-spot-500-a32: hsl(from var(--purple-spot-500) h s l / .32);
101
+ --purple-spot-500-a24: hsl(from var(--purple-spot-500) h s l / .24);
102
+ --purple-spot-500-a16: hsl(from var(--purple-spot-500) h s l / .16);
103
+ --purple-spot-500-a12: hsl(from var(--purple-spot-500) h s l / .12);
104
+ // Blissful Berry
105
+ --blissful-berry-500: lch(var(--l-base) var(--c-base) 338);
106
+ --blissful-berry-100: lch(from var(--blissful-berry-500) calc(l + var(--l-100-add)) calc(c - var(--c-100-remove)) h);
107
+ --blissful-berry-200: lch(from var(--blissful-berry-500) calc(l + var(--l-200-add)) calc(c - var(--c-200-remove)) h);
108
+ --blissful-berry-300: lch(from var(--blissful-berry-500) calc(l + var(--l-300-add)) calc(c - var(--c-300-remove)) h);
109
+ --blissful-berry-400: lch(from var(--blissful-berry-500) calc(l + var(--l-400-add)) calc(c - var(--c-400-remove)) h);
110
+ --blissful-berry-600: lch(from var(--blissful-berry-500) calc(l - var(--l-600-remove)) calc(c + var(--c-600-add)) h);
111
+ --blissful-berry-700: lch(from var(--blissful-berry-500) calc(l - var(--l-700-remove)) calc(c + var(--c-700-add)) h);
112
+ --blissful-berry-800: lch(from var(--blissful-berry-500) calc(l - var(--l-800-remove)) calc(c + var(--c-800-add)) h);
113
+ --blissful-berry-500-a32: hsl(from var(--blissful-berry-500) h s l / .32);
114
+ --blissful-berry-500-a24: hsl(from var(--blissful-berry-500) h s l / .24);
115
+ --blissful-berry-500-a16: hsl(from var(--blissful-berry-500) h s l / .16);
116
+ --blissful-berry-500-a12: hsl(from var(--blissful-berry-500) h s l / .12);
117
+ // NEUTRAL
118
+ // Buoyant Grey
119
+ --buoyant-grey-500: lch(46% 11 260);
120
+ --buoyant-grey-000: lch(from var(--buoyant-grey-500) calc(l + 54) calc(c - 12) h);
121
+ --buoyant-grey-050: lch(from var(--buoyant-grey-500) calc(l + 50.8) calc(c - 9) h);
122
+ --buoyant-grey-100: lch(from var(--buoyant-grey-500) calc(l + 48.2) calc(c - 9) h);
123
+ --buoyant-grey-125: lch(from var(--buoyant-grey-500) calc(l + 45.5) calc(c - 8) h);
124
+ --buoyant-grey-150: lch(from var(--buoyant-grey-500) calc(l + 39) calc(c - 6) h);
125
+ --buoyant-grey-200: lch(from var(--buoyant-grey-500) calc(l + 30) calc(c - 4) h);
126
+ --buoyant-grey-300: lch(from var(--buoyant-grey-500) calc(l + 20) calc(c - 2) h);
127
+ --buoyant-grey-400: lch(from var(--buoyant-grey-500) calc(l + 10) calc(c - 0) h);
128
+ --buoyant-grey-600: lch(from var(--buoyant-grey-500) calc(l - 8) calc(c + 0) h);
129
+ --buoyant-grey-700: lch(from var(--buoyant-grey-500) calc(l - 16) calc(c + 0) h);
130
+ --buoyant-grey-800: lch(from var(--buoyant-grey-500) calc(l - 22) calc(c + 0) h);
131
+ --buoyant-grey-825: lch(from var(--buoyant-grey-500) calc(l - 26) calc(c + 0) h);
132
+ --buoyant-grey-850: lch(from var(--buoyant-grey-500) calc(l - 31) calc(c + 1) h);
133
+ --buoyant-grey-900: lch(from var(--buoyant-grey-500) calc(l - 36) calc(c + 2) h);
134
+ --buoyant-grey-950: lch(from var(--buoyant-grey-500) calc(l - 42) calc(c + 2) h);
135
+ --buoyant-grey-999: lch(from var(--buoyant-grey-500) calc(l - 46) calc(c - 11) h);
136
+ --buoyant-grey-200-a40: hsl(from var(--buoyant-grey-200) h s l / .40);
137
+ --buoyant-grey-200-a32: hsl(from var(--buoyant-grey-200) h s l / .32);
138
+ --buoyant-grey-200-a24: hsl(from var(--buoyant-grey-200) h s l / .24);
139
+ --buoyant-grey-200-a16: hsl(from var(--buoyant-grey-200) h s l / .16);
140
+ --buoyant-grey-200-a12: hsl(from var(--buoyant-grey-200) h s l / .12);
141
+ --buoyant-grey-300-a40: hsl(from var(--buoyant-grey-300) h s l / .40);
142
+ --buoyant-grey-300-a32: hsl(from var(--buoyant-grey-300) h s l / .32);
143
+ --buoyant-grey-300-a24: hsl(from var(--buoyant-grey-300) h s l / .24);
144
+ --buoyant-grey-300-a16: hsl(from var(--buoyant-grey-300) h s l / .16);
145
+ --buoyant-grey-300-a12: hsl(from var(--buoyant-grey-300) h s l / .12);
146
+ --buoyant-grey-400-a40: hsl(from var(--buoyant-grey-400) h s l / .40);
147
+ --buoyant-grey-400-a32: hsl(from var(--buoyant-grey-400) h s l / .32);
148
+ --buoyant-grey-400-a24: hsl(from var(--buoyant-grey-400) h s l / .24);
149
+ --buoyant-grey-400-a16: hsl(from var(--buoyant-grey-400) h s l / .16);
150
+ --buoyant-grey-400-a12: hsl(from var(--buoyant-grey-400) h s l / .12);
151
+ --buoyant-grey-500-a40: hsl(from var(--buoyant-grey-500) h s l / .40);
152
+ --buoyant-grey-500-a32: hsl(from var(--buoyant-grey-500) h s l / .32);
153
+ --buoyant-grey-500-a24: hsl(from var(--buoyant-grey-500) h s l / .24);
154
+ --buoyant-grey-500-a16: hsl(from var(--buoyant-grey-500) h s l / .16);
155
+ --buoyant-grey-500-a12: hsl(from var(--buoyant-grey-500) h s l / .12);
156
+ --buoyant-grey-600-a40: hsl(from var(--buoyant-grey-600) h s l / .40);
157
+ --buoyant-grey-600-a32: hsl(from var(--buoyant-grey-600) h s l / .32);
158
+ --buoyant-grey-600-a24: hsl(from var(--buoyant-grey-600) h s l / .24);
159
+ --buoyant-grey-600-a16: hsl(from var(--buoyant-grey-600) h s l / .16);
160
+ --buoyant-grey-600-a12: hsl(from var(--buoyant-grey-600) h s l / .12);
161
+ }
package/app/styles/design-tokens/_semantic-colors.scss ADDED
@@ -0,0 +1,161 @@
1
+ :root {
2
+ // Surface (backgrounds etc.)
3
+ --color-surface-base: var(--buoyant-grey-000);
4
+ --color-surface-muted: var(--buoyant-grey-050);
5
+ --color-surface-subdued: var(--buoyant-grey-100);
6
+ --color-surface-faded: var(--buoyant-grey-125);
7
+ --color-surface-dimmed: var(--buoyant-grey-150);
8
+ --color-surface-deep: var(--buoyant-grey-200);
9
+ --color-surface-inverted-medium: var(--buoyant-grey-900);
10
+ --color-surface-inverted-strong: var(--buoyant-grey-950);
11
+
12
+ --color-surface-dark: var(--buoyant-grey-800);
13
+
14
+ --color-surface-muted-translucent: var(--buoyant-grey-200-a12);
15
+ --color-surface-subdued-translucent: var(--buoyant-grey-200-a24);
16
+ --color-surface-faded-translucent: var(--buoyant-grey-200-a40);
17
+ // Text
18
+ --color-text-default: var(--buoyant-grey-900);
19
+ --color-text-muted: var(--buoyant-grey-600);
20
+ --color-text-subdued: var(--buoyant-grey-500);
21
+ --color-text-inverse: var(--buoyant-grey-050);
22
+ --color-text-ondark: var(--buoyant-grey-000);
23
+ --color-text-onlight: var(--buoyant-grey-900);
24
+ // Line
25
+ --color-line-x-light: var(--buoyant-grey-500-a16);
26
+ --color-line-light: var(--buoyant-grey-500-a24);
27
+ --color-line-medium: var(--buoyant-grey-500-a32);
28
+ --color-line-strong: var(--buoyant-grey-500-a40);
29
+ --color-line-x-strong: var(--buoyant-grey-400);
30
+ // Primary
31
+ --color-primary-default: var(--brand-primary-700);
32
+ --color-primary-highlight: var(--brand-primary);
33
+ --color-primary-text: var(--brand-primary-800);
34
+ --color-primary-translucent: var(--brand-primary-a16);
35
+ --color-primary-translucent-strong: var(--brand-primary-a32);
36
+ // Success
37
+ --color-success-default: var(--green-brier-400);
38
+ --color-success-highlight: var(--green-brier-300);
39
+ --color-success-text: var(--green-brier-600);
40
+ --color-success-translucent: var(--green-brier-400-a12);
41
+ // Warning
42
+ --color-warning-default: var(--syrah-soil-300);
43
+ --color-warning-highlight: var(--syrah-soil-200);
44
+ --color-warning-text: var(--syrah-soil-400);
45
+ --color-warning-translucent: var(--syrah-soil-500-a12);
46
+ // Alert
47
+ --color-alert-default: var(--morocco-red-500);
48
+ --color-alert-highlight: var(--morocco-red-400);
49
+ --color-alert-text: var(--morocco-red-600);
50
+ --color-alert-translucent: var(--morocco-red-500-a16);
51
+ // Highlight
52
+ --color-highlight-default: var(--blissful-berry-400);
53
+ --color-highlight-highlight: var(--blissful-berry-300);
54
+ --color-highlight-text: var(--blissful-berry-600);
55
+ --color-highlight-translucent: var(--blissful-berry-500-a12);
56
+ // Info
57
+ --color-info-default: var(--sorcerer-blue-500);
58
+ --color-info-highlight: var(--sorcerer-blue-300);
59
+ --color-info-text: var(--sorcerer-blue-700);
60
+ --color-info-translucent: var(--sorcerer-blue-500-a12);
61
+ // Neutral
62
+ --color-neutral-light-default: var(--buoyant-grey-300-a24);
63
+ --color-neutral-light-text: var(--buoyant-grey-700);
64
+ --color-neutral-medium-default: var(--buoyant-grey-200);
65
+ --color-neutral-strong-default: var(--buoyant-grey-600);
66
+ --color-neutral-strong-text: var(--buoyant-grey-100);
67
+ // Interactive
68
+ --color-interactive-default: var(--brand-primary-700);
69
+ --color-interactive-highlight: var(--brand-primary);
70
+ --color-interactive-text: var(--brand-primary-800);
71
+ --color-interactive-translucent: var(--brand-primary-a16);
72
+ --color-interactive-translucent-strong: var(--brand-primary-a32);
73
+ --color-interactive-surface-selected: var(--brand-primary-100);
74
+ --color-interactive-shadow-focus: var(--brand-primary-a32);
75
+ // General clickabl content items (list item, grid item)
76
+ --color-item-bg-normal: var(--color-surface-base);
77
+ --color-item-bg-hover: var(--color-surface-muted);
78
+ --color-item-bg-active: var(--color-interactive-surface-selected);
79
+ --color-item-border-active: var(--color-interactive-translucent-strong);
80
+ --color-item-overlay-actioning: hsl(from var(--color-surface-base) h s l / .70);
81
+ }
82
+
83
+ [data-theme="dark-ui"] {
84
+ // Surface (backgrounds etc.)
85
+ --color-surface-base: var(--buoyant-grey-900);
86
+ --color-surface-muted: var(--buoyant-grey-850);
87
+ --color-surface-subdued: var(--buoyant-grey-825);
88
+ --color-surface-faded: var(--buoyant-grey-800);
89
+ --color-surface-dimmed: var(--buoyant-grey-700);
90
+ --color-surface-deep: var(--buoyant-grey-600);
91
+
92
+ --color-surface-dark: var(--buoyant-grey-900);
93
+
94
+ --color-surface-inverted-medium: var(--buoyant-grey-700);
95
+ --color-surface-inverted-strong: var(--buoyant-grey-300);
96
+
97
+ --color-surface-muted-translucent: var(--buoyant-grey-600-a16);
98
+ --color-surface-subdued-translucent: var(--buoyant-grey-600-a24);
99
+ --color-surface-faded-translucent: var(--buoyant-grey-500-a24);
100
+ // Text
101
+ --color-text-default: var(--buoyant-grey-050);
102
+ --color-text-muted: var(--buoyant-grey-200);
103
+ --color-text-subdued: var(--buoyant-grey-300);
104
+ --color-text-inverse: var(--buoyant-grey-900);
105
+ --color-text-ondark: var(--buoyant-grey-000);
106
+ --color-text-onlight: var(--buoyant-grey-900);
107
+ // Line
108
+ --color-line-x-light: var(--buoyant-grey-300-a16);
109
+ --color-line-light: var(--buoyant-grey-300-a24);
110
+ --color-line-medium: var(--buoyant-grey-300-a32);
111
+ --color-line-strong: var(--buoyant-grey-300-a40);
112
+ --color-line-x-strong: var(--buoyant-grey-400);
113
+ // Primary
114
+ --color-primary-default: var(--brand-primary-700);
115
+ --color-primary-highlight: var(--brand-primary-600);
116
+ --color-primary-text: var(--brand-primary-400);
117
+ --color-primary-translucent: var(--brand-primary-a16);
118
+ --color-primary-highlight-translucent: var(--brand-primary-600-a16);
119
+ // Success
120
+ --color-success-default: var(--green-brier-500);
121
+ --color-success-highlight: var(--green-brier-400);
122
+ --color-success-text: var(--green-brier-300);
123
+ --color-success-translucent: var(--green-brier-400-a16);
124
+ // Warning
125
+ --color-warning-default: var(--syrah-soil-400);
126
+ --color-warning-highlight: var(--syrah-soil-300);
127
+ --color-warning-text: var(--syrah-soil-300);
128
+ --color-warning-translucent: var(--syrah-soil-500-a16);
129
+ // Alert
130
+ --color-alert-default: var(--morocco-red-600);
131
+ --color-alert-text: var(--morocco-red-400);
132
+ --color-alert-translucent: var(--morocco-red-500-a16);
133
+ // Highlight
134
+ --color-highlight-default: var(--blissful-berry-500);
135
+ --color-highlight-text: var(--blissful-berry-300);
136
+ --color-highlight-translucent: var(--blissful-berry-500-a16);
137
+ // Info
138
+ --color-info-default: var(--sorcerer-blue-600);
139
+ --color-info-text: var(--sorcerer-blue-300);
140
+ --color-info-translucent: var(--sorcerer-blue-500-a16);
141
+ // Neutral
142
+ --color-neutral-light-default: var(--buoyant-grey-500-a24);
143
+ --color-neutral-light-text: var(--buoyant-grey-200);
144
+ --color-neutral-medium-default: var(--buoyant-grey-300);
145
+ --color-neutral-strong-default: var(--buoyant-grey-600);
146
+ --color-neutral-strong-text: var(--buoyant-grey-100);
147
+ // Interactive
148
+ --color-interactive-default: var(--brand-primary-700);
149
+ --color-interactive-highlight: var(--brand-primary);
150
+ --color-interactive-text: var(--brand-primary-400);
151
+ --color-interactive-translucent: var(--brand-primary-a16);
152
+ --color-interactive-translucent-strong: var(--brand-primary-a32);
153
+ --color-interactive-surface-selected: var(--brand-primary-950);
154
+ --color-interactive-shadow-focus: var(--brand-primary-a32);
155
+ // General clickabl content items (list item, grid item)
156
+ --color-item-bg-normal: var(--color-surface-base);
157
+ --color-item-bg-hover: var(--color-surface-muted);
158
+ --color-item-bg-active: var(--color-interactive-surface-selected);
159
+ --color-item-border-active: var(--color-interactive-translucent-strong);
160
+ --color-item-overlay-actioning: hsl(from var(--color-surface-base) h s l / .70);
161
+ }