@symbo.ls/preview 2.0.7 → 2.6.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 (216) hide show
  1. package/{src/pages/Export → .legacy}/_tools_old.js +7 -6
  2. package/.legacy/index copy.js +45 -0
  3. package/{src/pages/Spaces → .legacy}/preview.js +14 -14
  4. package/{src/pages/Spaces → .legacy}/style.js +0 -3
  5. package/.vscode/extensions.json +5 -0
  6. package/index.html +4 -14
  7. package/index.js +44 -0
  8. package/package.json +32 -32
  9. package/src/app.js +30 -68
  10. package/src/assets/dark.png +0 -0
  11. package/src/assets/mask1.png +0 -0
  12. package/src/assets/mask2.png +0 -0
  13. package/src/assets/shapes.png +0 -0
  14. package/src/assets/space.png +0 -0
  15. package/src/assets/type.png +0 -0
  16. package/src/components/Aside.js +101 -0
  17. package/src/components/Banner.js +58 -0
  18. package/src/components/ColorText.js +29 -0
  19. package/src/components/ColorsPalette.js +69 -0
  20. package/src/components/ColumnParagrphs.js +23 -0
  21. package/src/components/ContinueButton.js +14 -0
  22. package/src/components/DesignComponent.js +80 -0
  23. package/src/components/FontText.js +193 -0
  24. package/src/components/Header.js +50 -0
  25. package/src/components/HeaderHeading.js +23 -0
  26. package/src/components/IconsGroup.js +60 -0
  27. package/src/components/Page.js +135 -0
  28. package/src/components/ResponsivePreview.js +44 -0
  29. package/src/components/Route.js +1 -0
  30. package/src/components/ShapePreview.js +63 -0
  31. package/src/components/ShapeSet.js +85 -0
  32. package/src/components/SlidersWithResponsive.js +23 -0
  33. package/src/components/SpacingButton/actionButtons.js +41 -0
  34. package/src/components/SpacingButton/dropdown.js +114 -0
  35. package/src/components/SpacingButton/index.js +248 -0
  36. package/src/components/SpacingButton/props.js +45 -0
  37. package/src/components/SpacingPreview.js +154 -0
  38. package/src/components/SpacingTable.js +210 -0
  39. package/src/components/ThemeButtons.js +42 -0
  40. package/src/components/UploadImage.js +61 -0
  41. package/src/components/Widget.js +1 -0
  42. package/src/components/index.js +25 -0
  43. package/src/config/index.js +12 -31
  44. package/src/config/theme.js +1 -71
  45. package/src/pages/Account/__/index.js +241 -0
  46. package/src/pages/Account/{setUpProject.js → __/setUpProject.js} +10 -10
  47. package/src/pages/Account/index.js +17 -147
  48. package/src/pages/Color/globalThemes.js +30 -0
  49. package/src/pages/Color/index.js +7 -10
  50. package/src/pages/Color/palette.js +35 -0
  51. package/src/pages/Color/themes.js +23 -117
  52. package/src/pages/Components/grid.js +99 -0
  53. package/src/pages/Components/index.js +37 -0
  54. package/src/pages/Components/sidebar.js +28 -0
  55. package/src/pages/Components/style.js +16 -0
  56. package/src/pages/DesignSystem/Dashboard/banners.js +38 -0
  57. package/src/pages/DesignSystem/Dashboard/designElements.js +124 -0
  58. package/src/pages/DesignSystem/Dashboard/index.js +22 -0
  59. package/src/pages/DesignSystem/Dashboard/quickstart.js +86 -0
  60. package/src/pages/DesignSystem/Dashboard/state.js +118 -0
  61. package/src/pages/DesignSystem/Dashboard/summary.js +40 -0
  62. package/src/pages/DesignSystem/index.js +187 -0
  63. package/src/pages/Editor/index.js +7 -9
  64. package/src/pages/Editor/layers.js +14 -14
  65. package/src/pages/Editor/scene.js +7 -9
  66. package/src/pages/Editor/tools.js +22 -22
  67. package/src/pages/Export/const.js +3 -4
  68. package/src/pages/Export/description.js +58 -87
  69. package/src/pages/Export/gist.js +23 -0
  70. package/src/pages/Export/index.js +48 -39
  71. package/src/pages/Export/scene.js +98 -61
  72. package/src/pages/Export/state.js +11 -5
  73. package/src/pages/Export/tools.js +41 -86
  74. package/src/pages/Fonts/fontFaces.js +50 -0
  75. package/src/pages/Fonts/fontFamilies.js +47 -0
  76. package/src/pages/Fonts/index.js +15 -0
  77. package/src/pages/Fonts/state.js +5 -0
  78. package/src/pages/Icons/index.js +73 -69
  79. package/src/pages/Icons/style.js +0 -18
  80. package/src/pages/Init/ChooseEnvironment.js +104 -0
  81. package/src/pages/Init/CreateDocumentTheme.js +166 -0
  82. package/src/pages/Init/CreatePalette.js +72 -0
  83. package/src/pages/Init/FontText.js +23 -0
  84. package/src/pages/Init/Personalize/fields.js +109 -0
  85. package/src/pages/Init/Personalize/icon.js +42 -0
  86. package/src/pages/Init/Personalize/index.js +37 -0
  87. package/src/pages/Init/index.js +36 -0
  88. package/src/pages/Library/disabled.js +38 -0
  89. package/src/pages/Library/index.js +24 -47
  90. package/src/pages/MediaQuery/index.js +46 -0
  91. package/src/pages/MediaQuery/lists.js +285 -0
  92. package/src/pages/MediaQuery/state.js +150 -0
  93. package/src/pages/MediaQuery/typeScale.js +69 -0
  94. package/src/pages/Shapes/index.js +54 -204
  95. package/src/pages/Shapes/shapeSet.js +133 -0
  96. package/src/pages/Shapes/style.js +0 -28
  97. package/src/pages/Spaces/index.js +23 -47
  98. package/src/pages/Spaces/sequence.js +30 -1
  99. package/src/pages/Spaces/state.js +12 -14
  100. package/src/pages/State/index.js +86 -0
  101. package/src/pages/{ColorEditor → Theme}/friendTheme.js +3 -3
  102. package/src/pages/Theme/index.js +197 -0
  103. package/src/pages/{ColorEditor → Theme}/interactivity.js +6 -7
  104. package/src/pages/Theme/preview.js +153 -0
  105. package/src/pages/{ColorEditor → Theme}/style.js +1 -12
  106. package/src/pages/{ColorEditor → Theme}/themingTools.js +12 -12
  107. package/src/pages/Typography/collection.js +110 -0
  108. package/src/pages/Typography/documentStyles.js +125 -0
  109. package/src/pages/Typography/index.js +28 -36
  110. package/src/pages/Typography/rangeButtons.js +58 -0
  111. package/src/pages/Typography/shared.js +2 -3
  112. package/src/pages/Typography/state.js +9 -8
  113. package/src/pages/Typography/stylesHelpers.js +30 -0
  114. package/src/pages/Typography/typeScale.js +63 -82
  115. package/src/pages/index.js +15 -23
  116. package/src/style.js +15 -12
  117. package/svgSprite.config.js +2 -1
  118. package/README.md +0 -19
  119. package/app.webmanifest +0 -4
  120. package/netlify.toml +0 -19
  121. package/protect-pwd.js +0 -65
  122. package/src/animations.js +0 -71
  123. package/src/assets/dots.png +0 -0
  124. package/src/assets/dotsDark.png +0 -0
  125. package/src/data/Symbols.sketch +0 -0
  126. package/src/data/_Symbols.sketch/document.json +0 -1
  127. package/src/data/_Symbols.sketch/fonts/6c9956fc8970ec3d8268c3f286afe19d954fc40b +0 -0
  128. package/src/data/_Symbols.sketch/fonts/750e9b005158d57108ebbcf288e2582f078d6735 +0 -0
  129. package/src/data/_Symbols.sketch/fonts/86c45cb69ad4ba2a8e6d0b81f20964b33f4eca6c +0 -0
  130. package/src/data/_Symbols.sketch/fonts/f97cec7aed309ec77b4fd3005d1a3e0d86c2a7b9 +0 -0
  131. package/src/data/_Symbols.sketch/images/0427bc225ee7dc33db78252defd5b2e4cd5b7467.png +0 -0
  132. package/src/data/_Symbols.sketch/images/0c4846cdd2f11ffb23c9ce063380fc934f7a11ea.png +0 -0
  133. package/src/data/_Symbols.sketch/images/55d3f5e93869fbd70e8dfbca1ce3dfa0cc9f2dbe.png +0 -0
  134. package/src/data/_Symbols.sketch/images/67ae1583a9d77eec7106f5016f48b5594a02b3f6.png +0 -0
  135. package/src/data/_Symbols.sketch/images/7152b3ea22388d53052d0212995a1805527ea862.png +0 -0
  136. package/src/data/_Symbols.sketch/images/72f1896a8462385fd596bc35f240382ba15814fc.png +0 -0
  137. package/src/data/_Symbols.sketch/images/73e4245b1f867343001657193ff2318c9cf2ef53.png +0 -0
  138. package/src/data/_Symbols.sketch/images/7b89dae77676fb4cfd072e0830cff9c27afd11c6.png +0 -0
  139. package/src/data/_Symbols.sketch/images/811e2b516575d3b4e7709dfef6369bce7dae0a26.png +0 -0
  140. package/src/data/_Symbols.sketch/images/82d006789579f2ee1fa45c9116f7cd7dd1bcbe37.png +0 -0
  141. package/src/data/_Symbols.sketch/images/8a896270aa4da8e2401d0ea76e46dc9b9125e59a.png +0 -0
  142. package/src/data/_Symbols.sketch/images/966688c4a579283836f15ab69c8b76e11b236ff5.png +0 -0
  143. package/src/data/_Symbols.sketch/images/b903a498e1d438e8bb12de5422f732c717b79eff.png +0 -0
  144. package/src/data/_Symbols.sketch/images/b9f3cae81a855e21ae75185dcb6ae6551c5447f1.png +0 -0
  145. package/src/data/_Symbols.sketch/images/cd0f908410abf4cad7a4501539eb0711c41a182f.png +0 -0
  146. package/src/data/_Symbols.sketch/images/d54f15f130ba4f1d4ad56f03c01ac06fe0ab4f56.png +0 -0
  147. package/src/data/_Symbols.sketch/images/df5a20029363f95abc58b2c8972e1417d84c8aa7.png +0 -0
  148. package/src/data/_Symbols.sketch/images/e889546970c931244400c2f70412c39123029cb3.png +0 -0
  149. package/src/data/_Symbols.sketch/images/f420a7a2beb15bee5d2ecbba8f296c6d4b22dfa3.png +0 -0
  150. package/src/data/_Symbols.sketch/meta.json +0 -1
  151. package/src/data/_Symbols.sketch/pages/31D11772-FB33-42EC-A3CC-79F63922E04D.json +0 -1
  152. package/src/data/_Symbols.sketch/pages/35BD91AD-F0ED-4002-891D-F1B3250E88C1.json +0 -1
  153. package/src/data/_Symbols.sketch/pages/4831AF31-ECB8-4DA6-B4D0-C1095D42146C.json +0 -1
  154. package/src/data/_Symbols.sketch/pages/6FCC0155-B3F4-4792-892E-523D45315AFD.json +0 -1
  155. package/src/data/_Symbols.sketch/pages/7996D5DD-C5B2-4EE7-9DE8-2C05E2ACA9F3.json +0 -1
  156. package/src/data/_Symbols.sketch/pages/B314C0F3-0038-473F-A127-536AF28E5272.json +0 -1
  157. package/src/data/_Symbols.sketch/pages/B6798E64-F7E9-40F5-9BD0-88A548478438.json +0 -1
  158. package/src/data/_Symbols.sketch/pages/B9B28DF3-EDC2-4D5B-A412-12B3B2E7DE58.json +0 -1
  159. package/src/data/_Symbols.sketch/pages/CA6E47E4-DAF7-4D1D-8DDC-D5A60508D9A0.json +0 -1
  160. package/src/data/_Symbols.sketch/pages/D6F5EB10-9D31-47AC-9077-1CE8CB2C2448.json +0 -1
  161. package/src/data/_Symbols.sketch/previews/preview.png +0 -0
  162. package/src/data/_Symbols.sketch/user.json +0 -1
  163. package/src/data/categories.js +0 -44
  164. package/src/data/components/button-archived/index.js +0 -63
  165. package/src/data/components/button-archived/style.js +0 -5
  166. package/src/data/components/button-circle/index.js +0 -54
  167. package/src/data/components/button-contacts/index.js +0 -56
  168. package/src/data/components/button-contacts/style.js +0 -13
  169. package/src/data/components/button-download/index.js +0 -63
  170. package/src/data/components/button-pro/index.js +0 -98
  171. package/src/data/components/button-pro/style.js +0 -19
  172. package/src/data/components/button-theme-switcher/index.js +0 -104
  173. package/src/data/components/button-theme-switcher/style.js +0 -16
  174. package/src/data/components/button-user/index.js +0 -82
  175. package/src/data/components/button-user/style.js +0 -25
  176. package/src/data/components/datepicker/index.js +0 -40
  177. package/src/data/components/datepicker/style.js +0 -4
  178. package/src/data/components/dropdown-list/index.js +0 -56
  179. package/src/data/components/field/index.js +0 -40
  180. package/src/data/components/index.js +0 -34
  181. package/src/data/components/label/index.js +0 -40
  182. package/src/data/components/notification/index.js +0 -55
  183. package/src/data/components/notification/style.js +0 -20
  184. package/src/data/components/pills/index.js +0 -37
  185. package/src/data/components/tooltip/index.js +0 -38
  186. package/src/data/filters.js +0 -3
  187. package/src/data/index.js +0 -3
  188. package/src/data/library/button-circle/index.js +0 -52
  189. package/src/data/library/button-join/index.js +0 -61
  190. package/src/data/library/family-bundle/index.js +0 -99
  191. package/src/data/library/family-bundle/style.js +0 -27
  192. package/src/data/library/index.js +0 -15
  193. package/src/data/library/join-class/index.js +0 -45
  194. package/src/data/library/parent-mode/index.js +0 -69
  195. package/src/data/library/parent-mode/style.js +0 -25
  196. package/src/index.html +0 -57
  197. package/src/index.js +0 -7
  198. package/src/pages/Color/colors.js +0 -58
  199. package/src/pages/Color/documentThemes.js +0 -101
  200. package/src/pages/Color/style.js +0 -7
  201. package/src/pages/ColorEditor/colorTone.js +0 -163
  202. package/src/pages/ColorEditor/index.js +0 -178
  203. package/src/pages/Export/header.js +0 -37
  204. package/src/pages/Export/style.js +0 -28
  205. package/src/pages/Library/style.js +0 -43
  206. package/src/pages/PageProto.js +0 -26
  207. package/src/pages/Typography/docFonts.js +0 -128
  208. package/src/pages/Typography/docStyles.js +0 -97
  209. package/src/pages/Typography/style.js +0 -11
  210. package/src/protect.js +0 -114
  211. package/src/state.js +0 -3
  212. package/src/test.js +0 -30
  213. package/test/index.test.js +0 -5
  214. /package/{src/pages/Spaces → .legacy}/boxModel.js +0 -0
  215. /package/{src/data/favorites.js → .legacy/sequence.js} +0 -0
  216. /package/src/pages/{ColorEditor → Theme}/ntc.js +0 -0
package/src/data/library/join-class/index.js DELETED
@@ -1,45 +0,0 @@
1
- 'use strict'
2
-
3
- import CATEGORIES from '../../categories'
4
-
5
- import { UserBundle } from '@symbo.ls/all'
6
-
7
- const key = 'join-class'
8
- const title = 'Join class Button'
9
- const description = ''
10
- const category = CATEGORIES[0]
11
-
12
- const component = {
13
- proto: UserBundle,
14
- style: {
15
- img: { border: '1px solid black' }
16
- },
17
- users: { ...[{}, {}, {}] }
18
- }
19
-
20
- const code = `{
21
- users: [{}, {}, {}]
22
- }`
23
-
24
- const defaultState = {}
25
- const defaultProps = {
26
- users: [{}, {}, {}]
27
- }
28
-
29
- const settings = {
30
- gridOptions: { colspan: 6, rowspan: 2 }
31
- }
32
-
33
- export default {
34
- key,
35
- title,
36
- description,
37
- category,
38
- component,
39
- code,
40
- defaultState,
41
- defaultProps,
42
- settings,
43
- interactivity: [],
44
- dataTypes: []
45
- }
package/src/data/library/parent-mode/index.js DELETED
@@ -1,69 +0,0 @@
1
- 'use strict'
2
-
3
- import CATEGORIES from '../../categories'
4
- import style from './style'
5
-
6
- import { Shape, Icon, UserBundle, Block } from '@symbo.ls/all'
7
-
8
- const key = 'parent-mode'
9
- const title = 'Parent Mode'
10
- const description = ''
11
- const category = CATEGORIES[CATEGORIES.length - 1]
12
-
13
- const component = {
14
- proto: [Shape, Block],
15
- style,
16
- props: (el, s) => ({
17
- round: 'Z',
18
- theme: s.sceneTheme === 'light' ? 'purple2' : 'purple',
19
- padding: 'B B2 B2',
20
- icon: 'checkMedium'
21
- }),
22
- icon: { proto: Icon },
23
- h5: 'Welcome to parent Mode',
24
- description: {
25
- proto: UserBundle,
26
- users: { ...[{}, {}, {}] },
27
- span: 'You’ll now be able to chat with tutor privately. No other participants will see the messages.'
28
- }
29
- }
30
-
31
- const code = `{
32
- round: 'Z',
33
- theme: 'purple',
34
- icon: 'checkMedium',
35
- h2: 'Welcome to parent Mode',
36
- description: {
37
- users: [{}, {}, {}],
38
- p: 'You’ll now be able to chat with tutor privately. No other participants will see the messages.'
39
- }
40
- }`
41
-
42
- const defaultState = {}
43
- const defaultProps = {
44
- round: 'Z',
45
- theme: 'purple',
46
- icon: 'checkMedium',
47
- title: 'Welcome to parent Mode',
48
- users: [{}, {}, {}],
49
- description: 'You’ll now be able to chat with tutor privately. No other participants will see the messages.'
50
- }
51
-
52
- const settings = {
53
- gridOptions: { colspan: 15, rowspan: 2 }
54
- }
55
-
56
- export default {
57
- key,
58
- title,
59
- description,
60
- category,
61
- component,
62
- code,
63
- defaultState,
64
-
65
- defaultProps,
66
- settings,
67
- interactivity: [],
68
- dataTypes: []
69
- }
package/src/data/library/parent-mode/style.js DELETED
@@ -1,25 +0,0 @@
1
- 'use strict'
2
-
3
- export default {
4
- boxSizing: 'border-box',
5
- position: 'relative',
6
- display: 'block',
7
- '> svg': {
8
- position: 'absolute',
9
- top: '1.2em',
10
- right: '1.2em',
11
- color: 'rgba(215, 100, 185, .2)'
12
- },
13
- '> div': {
14
- alignItems: 'flex-start',
15
- '> div': { marginTop: '0.236em' }
16
- },
17
- h5: {
18
- margin: 0,
19
- marginBottom: '0.618em'
20
- },
21
- span: {
22
- maxWidth: `${314 / 14}em`,
23
- lineHeight: '1.382em'
24
- }
25
- }
package/src/index.html DELETED
@@ -1,57 +0,0 @@
1
- <html background="#000">
2
- <head>
3
- <title>Symbols Editor</title>
4
- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
5
- <meta name="apple-mobile-web-app-capable" content="yes">
6
-
7
- <meta charset="UTF-8">
8
-
9
- <meta name="author" content="SymbolsApp">
10
- <meta name="keywords" content="UIkit, Design System, Platform, Javascript, CSS, Less, Sass, Component, React, Angular, Vue, Svelte, HTML, Haml, Jade, Bootstrap, Semantic UI, Material, ">
11
- <meta name="description" content="Introducing a highly customizable UI kit to decorate your app from scratch. Our space shares all the tools and supplies to design desired components. ">
12
-
13
- <link rel="manifest" href="../app.webmanifest" crossorigin="use-credentials">
14
-
15
- <!-- Global site tag (gtag.js) - Google Analytics -->
16
- <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177072616-1"></script>
17
- <script>
18
- window.dataLayer = window.dataLayer || [];
19
- function gtag(){dataLayer.push(arguments);}
20
- gtag('js', new Date());
21
-
22
- gtag('config', 'UA-177072616-1');
23
- </script>
24
-
25
- <script>
26
- window['_fs_debug'] = false;
27
- window['_fs_host'] = 'fullstory.com';
28
- window['_fs_script'] = 'edge.fullstory.com/s/fs.js';
29
- window['_fs_org'] = '14YFSY';
30
- window['_fs_namespace'] = 'FS';
31
- (function(m,n,e,t,l,o,g,y){
32
- if (e in m) {if(m.console && m.console.log) { m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].');} return;}
33
- g=m[e]=function(a,b,s){g.q?g.q.push([a,b,s]):g._api(a,b,s);};g.q=[];
34
- o=n.createElement(t);o.async=1;o.crossOrigin='anonymous';o.src='https://'+_fs_script;
35
- y=n.getElementsByTagName(t)[0];y.parentNode.insertBefore(o,y);
36
- g.identify=function(i,v,s){g(l,{uid:i},s);if(v)g(l,v,s)};g.setUserVars=function(v,s){g(l,v,s)};g.event=function(i,v,s){g('event',{n:i,p:v},s)};
37
- g.anonymize=function(){g.identify(!!0)};
38
- g.shutdown=function(){g("rec",!1)};g.restart=function(){g("rec",!0)};
39
- g.log = function(a,b){g("log",[a,b])};
40
- g.consent=function(a){g("consent",!arguments.length||a)};
41
- g.identifyAccount=function(i,v){o='account';v=v||{};v.acctId=i;g(o,v)};
42
- g.clearUserCookie=function(){};
43
- g.setVars=function(n, p){g('setVars',[n,p]);};
44
- g._w={};y='XMLHttpRequest';g._w[y]=m[y];y='fetch';g._w[y]=m[y];
45
- if(m[y])m[y]=function(){return g._w[y].apply(this,arguments)};
46
- g._v="1.3.0";
47
- })(window,document,window['_fs_namespace'],'script','user');
48
- </script>
49
-
50
- <script defer data-domain="symbols.app" src="https://plausible.io/js/plausible.js"></script>
51
- <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
52
- </head>
53
- <body background="#000">
54
- <style type="text/css">body {background: #000;}</style>
55
- <script src="./index.js"></script>
56
- </body>
57
- </html>
package/src/index.js DELETED
@@ -1,7 +0,0 @@
1
- 'use strict'
2
-
3
- import './config'
4
- import DOM from 'domql-preview'
5
- import App from './app'
6
-
7
- export default DOM.create(App)
package/src/pages/Color/colors.js DELETED
@@ -1,58 +0,0 @@
1
- 'use strict'
2
-
3
- import { Button, SectionHeader, ColorTemplate } from '@symbo.ls/all'
4
-
5
- export default {
6
- tag: 'section',
7
- header: {
8
- proto: SectionHeader,
9
- props: { padding: 'C 0 0 0' },
10
- heading: {
11
- caption: 'Color Palette',
12
- p: { text: 'Document styling and theming' }
13
- }
14
- },
15
- nav: {
16
- style: {
17
- display: 'flex',
18
- gap: '1.2em',
19
- alignItems: 'center'
20
- },
21
- colors: {
22
- style: {
23
- display: 'flex',
24
- gap: '12px'
25
- },
26
-
27
- content: (el, s) => {
28
- if (!el.__root.state.CONFIG) return
29
- const { COLOR } = el.__root.state.CONFIG
30
-
31
- const Colors = {}
32
- Object.keys(COLOR).map(v => {
33
- Colors[v] = { state: COLOR[v] }
34
- })
35
-
36
- return {
37
- childProto: ColorTemplate,
38
- tag: 'fragment',
39
-
40
- ...Colors
41
- }
42
- }
43
- },
44
- plus: {
45
- proto: Button,
46
- props: {
47
- round: 8,
48
- icon: 'plus'
49
- },
50
- style: {
51
- height: `26px`,
52
- width: `26px`,
53
- background: 'rgba(255, 255, 255, .06)',
54
- color: 'white'
55
- }
56
- }
57
- }
58
- }
package/src/pages/Color/documentThemes.js DELETED
@@ -1,101 +0,0 @@
1
- 'use strict'
2
-
3
- import { Notification, Flex, ClickableItem, SectionHeader, Shape, Block, IconText, Link } from '@symbo.ls/all'
4
-
5
- // import { SectionHeader } from 'components/Header'
6
-
7
- export default {
8
- tag: 'section',
9
- header: {
10
- proto: SectionHeader,
11
- props: { padding: 'C 0 0 0' },
12
- heading: {
13
- caption: 'Document',
14
- p: { text: 'Document styling and theming provides global themes of the entire app, imagine it as a <body> styling' }
15
- }
16
- },
17
-
18
- mode: {
19
- proto: Flex,
20
- tag: 'nav',
21
-
22
- style: {
23
- gap: 16
24
- },
25
-
26
- childProto: {
27
- proto: [Notification, ClickableItem, Link],
28
- style: {
29
- opacity: '.5',
30
- textDecoration: 'none'
31
- },
32
- props: {
33
- gap: 'Z',
34
- round: 'Z',
35
- padding: 'Z1 D2 A A1',
36
- href: '/colors/documentThemes/addit-theme'
37
- },
38
- icon: {
39
- proto: [Shape, Block, IconText],
40
- props: {
41
- size: 'Z',
42
- padding: 'Z',
43
- round: 'Z'
44
- }
45
- },
46
- article: {
47
- props: { gap: 'X' },
48
- caption: {
49
- style: { fontWeight: 'bold' },
50
- props: { size: 'B' }
51
- },
52
- p: {
53
- props: { size: 'Y' },
54
- style: { '> span': { fontWeight: 'bold' } }
55
- }
56
- }
57
- },
58
-
59
- ...[
60
- {
61
- props: el => {
62
- if (!el.__root.state.CONFIG) return
63
- const { THEME } = el.__root.state.CONFIG
64
- return { theme: THEME.document.value }
65
- },
66
- icon: {
67
- props: { theme: 'lightMode', icon: 'sun' }
68
- },
69
- article: {
70
- caption: { text: 'Light' },
71
- p: {
72
- text: 'prefers-color-scheme:',
73
- span: ' Light'
74
- }
75
- }
76
- }, {
77
- if: el => {
78
- if (!el.__root.state.CONFIG) return
79
- const { THEME } = el.__root.state.CONFIG
80
- return THEME.document.variants && THEME.document.variants.dark
81
- },
82
- props: el => {
83
- if (!el.__root.state.CONFIG) return
84
- const { THEME } = el.__root.state.CONFIG
85
- return { theme: THEME.document.value }
86
- },
87
- style: { color: 'white' },
88
- icon: {
89
- props: { theme: 'darkMode', icon: 'moon' }
90
- },
91
- article: {
92
- caption: { text: 'Dark' },
93
- p: {
94
- text: 'prefers-color-scheme:',
95
- span: ' Dark'
96
- }
97
- }
98
- }
99
- ]
100
- }
101
- }
package/src/pages/Color/style.js DELETED
@@ -1,7 +0,0 @@
1
- 'use strict'
2
-
3
- export default {
4
- display: 'flex',
5
- flexDirection: 'column',
6
- gap: '68px',
7
- }
package/src/pages/ColorEditor/colorTone.js DELETED
@@ -1,163 +0,0 @@
1
- 'use strict'
2
-
3
- import { Block, Text, opacify, Shape, Grid, Overflow } from '@symbo.ls/all'
4
-
5
- const classOpacify = (el, opacity) => {
6
- if (!el.state.value) return
7
- const { background, backgroundColor, color } = el.state.value
8
- const bg = background || backgroundColor || color
9
- if (!bg) return
10
- return { background: opacify(bg, opacity) }
11
- }
12
-
13
- const TONES_AMOUNT = 13
14
- const TONES_ARR = new Array(TONES_AMOUNT).fill(0).map((_, i) => i)
15
-
16
- export const Tones = {
17
- proto: [Shape, Block, Grid, Overflow],
18
- props: {
19
- columns: `repeat(${TONES_AMOUNT}, 1fr)`,
20
- height: 'B',
21
- round: 'Z'
22
- },
23
- childProto: {
24
- tag: 'span',
25
- proto: Shape,
26
- props: { round: 0 },
27
- class: {
28
- transition: {
29
- transition: '165ms cubic-bezier(.29,.67,.51,.97)',
30
- transitionProperty: 'color, background'
31
- }
32
- }
33
- },
34
- ...TONES_ARR.map(v => ({
35
- class: { background: el => classOpacify(el, (100 / TONES_AMOUNT * v) / 100) }
36
- }))
37
- }
38
-
39
- export const colorTones = {
40
- tag: 'aside',
41
- // proto: Block,
42
- // style: styleColorTones,
43
- props: { flexFlow: 'column' },
44
- span: {
45
- proto: [Text, Block],
46
- props: {
47
- text: 'Preview',
48
- size: 'Z'
49
- },
50
- style: {
51
- display: 'block',
52
- marginBottom: '8px',
53
- opacity: '.65'
54
- }
55
- },
56
-
57
- preview: {
58
- proto: [Shape, Block],
59
- style: {
60
- background: 'rgba(255, 255, 255, .06)',
61
- '&, & *': { transition: '165ms cubic-bezier(.29,.67,.51,.97)', transitionProperty: 'color, background' }
62
- },
63
- props: (el, s) => ({
64
- padding: 'X1',
65
- round: 'Z2',
66
- theme: `${s.sceneTheme || 'dark'}Scene`
67
- }),
68
- scene: {
69
- proto: [Block],
70
- props: { padding: 'A' },
71
- style: {
72
- boxSizing: 'border-box',
73
- backgroundPosition: `center`,
74
- backgroundRepeat: `repeat`,
75
- backgroundSize: '100px 100px'
76
- },
77
- circle: {
78
- proto: [Block, Shape],
79
- props: (el, s) => ({
80
- theme: s.value,
81
- flexFlow: 'column',
82
- flexAlign: 'center center',
83
- width: 'G',
84
- aspectRatio: '1 / 1',
85
- round: '100%'
86
- }),
87
- style: { position: 'relative', borderWidth: '1px', borderStyle: 'solid' },
88
- h6: {
89
- proto: Text,
90
- style: { fontSize: `${26 / 16}em`, fontWeight: 'Bold' },
91
- span: {
92
- text: 'The',
93
- style: {
94
- fontWeight: 'normal',
95
- marginRight: '6px'
96
- }
97
- },
98
- text: 'Text Color'
99
- },
100
- span: {
101
- proto: Text,
102
- props: { text: (el, s) => s.value },
103
- style: {
104
- position: 'absolute',
105
- top: '86%',
106
- left: '50%',
107
- transform: 'translate(-50%, -50%)',
108
- fontWeight: '600'
109
- }
110
- }
111
- }
112
- }
113
- },
114
-
115
- opacity: {
116
- proto: Block,
117
- props: {
118
- padding: 'B1 0 0 0'
119
- },
120
- caption: {
121
- proto: [Text, Block],
122
- props: {
123
- text: 'Opacity',
124
- size: 'Z',
125
- padding: '0 0 Z1 0'
126
- },
127
- style: { opacity: '.65' }
128
- },
129
- tones: { proto: Tones }
130
- },
131
-
132
- shades: {
133
- proto: [Block],
134
- props: { padding: 'B 0 0 0' },
135
- caption: {
136
- proto: [Text, Block],
137
- props: {
138
- text: 'Shades',
139
- size: 'Z',
140
- padding: '0 0 Z1 0'
141
- },
142
- style: { opacity: '.65' }
143
- },
144
-
145
- generate: {
146
- proto: [Block, Shape, Overflow],
147
- props: { flexFlow: 'column', round: 'Z', gap: '2px' },
148
-
149
- childProto: {
150
- proto: [Tones],
151
- props: { round: 'X' },
152
- ...TONES_ARR.map(v => ({
153
- class: { background: el => classOpacify(el, (100 / TONES_AMOUNT * v) / 100) }
154
- }))
155
- },
156
-
157
- dark: {},
158
- light: {
159
- props: { theme: 'lightScene' }
160
- }
161
- }
162
- }
163
- }