npm - @symbo.ls/preview - Versions diffs - 0.0.97 → 2.0.7 - Mend

@symbo.ls/preview 0.0.97 → 2.0.7

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

package/README.md +19 -0
package/app.webmanifest +4 -0
package/index.html +14 -4
package/netlify.toml +19 -0
package/package.json +32 -32
package/protect-pwd.js +65 -0
package/src/animations.js +71 -0
package/src/app.js +68 -30
package/src/assets/dots.png +0 -0
package/src/assets/dotsDark.png +0 -0
package/src/config/index.js +31 -12
package/src/config/theme.js +71 -1
package/src/data/Symbols.sketch +0 -0
package/src/data/_Symbols.sketch/document.json +1 -0
package/src/data/_Symbols.sketch/fonts/6c9956fc8970ec3d8268c3f286afe19d954fc40b +0 -0
package/src/data/_Symbols.sketch/fonts/750e9b005158d57108ebbcf288e2582f078d6735 +0 -0
package/src/data/_Symbols.sketch/fonts/86c45cb69ad4ba2a8e6d0b81f20964b33f4eca6c +0 -0
package/src/data/_Symbols.sketch/fonts/f97cec7aed309ec77b4fd3005d1a3e0d86c2a7b9 +0 -0
package/src/data/_Symbols.sketch/images/0427bc225ee7dc33db78252defd5b2e4cd5b7467.png +0 -0
package/src/data/_Symbols.sketch/images/0c4846cdd2f11ffb23c9ce063380fc934f7a11ea.png +0 -0
package/src/data/_Symbols.sketch/images/55d3f5e93869fbd70e8dfbca1ce3dfa0cc9f2dbe.png +0 -0
package/src/data/_Symbols.sketch/images/67ae1583a9d77eec7106f5016f48b5594a02b3f6.png +0 -0
package/src/data/_Symbols.sketch/images/7152b3ea22388d53052d0212995a1805527ea862.png +0 -0
package/src/data/_Symbols.sketch/images/72f1896a8462385fd596bc35f240382ba15814fc.png +0 -0
package/src/data/_Symbols.sketch/images/73e4245b1f867343001657193ff2318c9cf2ef53.png +0 -0
package/src/data/_Symbols.sketch/images/7b89dae77676fb4cfd072e0830cff9c27afd11c6.png +0 -0
package/src/data/_Symbols.sketch/images/811e2b516575d3b4e7709dfef6369bce7dae0a26.png +0 -0
package/src/data/_Symbols.sketch/images/82d006789579f2ee1fa45c9116f7cd7dd1bcbe37.png +0 -0
package/src/data/_Symbols.sketch/images/8a896270aa4da8e2401d0ea76e46dc9b9125e59a.png +0 -0
package/src/data/_Symbols.sketch/images/966688c4a579283836f15ab69c8b76e11b236ff5.png +0 -0
package/src/data/_Symbols.sketch/images/b903a498e1d438e8bb12de5422f732c717b79eff.png +0 -0
package/src/data/_Symbols.sketch/images/b9f3cae81a855e21ae75185dcb6ae6551c5447f1.png +0 -0
package/src/data/_Symbols.sketch/images/cd0f908410abf4cad7a4501539eb0711c41a182f.png +0 -0
package/src/data/_Symbols.sketch/images/d54f15f130ba4f1d4ad56f03c01ac06fe0ab4f56.png +0 -0
package/src/data/_Symbols.sketch/images/df5a20029363f95abc58b2c8972e1417d84c8aa7.png +0 -0
package/src/data/_Symbols.sketch/images/e889546970c931244400c2f70412c39123029cb3.png +0 -0
package/src/data/_Symbols.sketch/images/f420a7a2beb15bee5d2ecbba8f296c6d4b22dfa3.png +0 -0
package/src/data/_Symbols.sketch/meta.json +1 -0
package/src/data/_Symbols.sketch/pages/31D11772-FB33-42EC-A3CC-79F63922E04D.json +1 -0
package/src/data/_Symbols.sketch/pages/35BD91AD-F0ED-4002-891D-F1B3250E88C1.json +1 -0
package/src/data/_Symbols.sketch/pages/4831AF31-ECB8-4DA6-B4D0-C1095D42146C.json +1 -0
package/src/data/_Symbols.sketch/pages/6FCC0155-B3F4-4792-892E-523D45315AFD.json +1 -0
package/src/data/_Symbols.sketch/pages/7996D5DD-C5B2-4EE7-9DE8-2C05E2ACA9F3.json +1 -0
package/src/data/_Symbols.sketch/pages/B314C0F3-0038-473F-A127-536AF28E5272.json +1 -0
package/src/data/_Symbols.sketch/pages/B6798E64-F7E9-40F5-9BD0-88A548478438.json +1 -0
package/src/data/_Symbols.sketch/pages/B9B28DF3-EDC2-4D5B-A412-12B3B2E7DE58.json +1 -0
package/src/data/_Symbols.sketch/pages/CA6E47E4-DAF7-4D1D-8DDC-D5A60508D9A0.json +1 -0
package/src/data/_Symbols.sketch/pages/D6F5EB10-9D31-47AC-9077-1CE8CB2C2448.json +1 -0
package/src/data/_Symbols.sketch/previews/preview.png +0 -0
package/src/data/_Symbols.sketch/user.json +1 -0
package/src/data/categories.js +44 -0
package/src/data/components/button-archived/index.js +63 -0
package/src/data/components/button-archived/style.js +5 -0
package/src/data/components/button-circle/index.js +54 -0
package/src/data/components/button-contacts/index.js +56 -0
package/src/data/components/button-contacts/style.js +13 -0
package/src/data/components/button-download/index.js +63 -0
package/src/data/components/button-pro/index.js +98 -0
package/src/data/components/button-pro/style.js +19 -0
package/src/data/components/button-theme-switcher/index.js +104 -0
package/src/data/components/button-theme-switcher/style.js +16 -0
package/src/data/components/button-user/index.js +82 -0
package/src/data/components/button-user/style.js +25 -0
package/src/data/components/datepicker/index.js +40 -0
package/src/data/components/datepicker/style.js +4 -0
package/src/data/components/dropdown-list/index.js +56 -0
package/src/data/components/field/index.js +40 -0
package/src/data/components/index.js +34 -0
package/src/data/components/label/index.js +40 -0
package/src/data/components/notification/index.js +55 -0
package/src/data/components/notification/style.js +20 -0
package/src/data/components/pills/index.js +37 -0
package/src/data/components/tooltip/index.js +38 -0
package/src/data/index.js +3 -0
package/src/data/library/button-circle/index.js +52 -0
package/src/data/library/button-join/index.js +61 -0
package/src/data/library/family-bundle/index.js +99 -0
package/src/data/library/family-bundle/style.js +27 -0
package/src/data/library/index.js +15 -0
package/src/data/library/join-class/index.js +45 -0
package/src/data/library/parent-mode/index.js +69 -0
package/src/data/library/parent-mode/style.js +25 -0
package/src/index.html +57 -0
package/src/index.js +7 -0
package/src/pages/Account/index.js +147 -17
package/src/pages/Account/{__/setUpProject.js → setUpProject.js} +10 -10
package/src/pages/Color/colors.js +58 -0
package/src/pages/Color/documentThemes.js +101 -0
package/src/pages/Color/index.js +10 -7
package/src/pages/Color/style.js +7 -0
package/src/pages/Color/themes.js +117 -23
package/src/pages/ColorEditor/colorTone.js +163 -0
package/src/pages/{Theme → ColorEditor}/friendTheme.js +3 -3
package/src/pages/ColorEditor/index.js +178 -0
package/src/pages/{Theme → ColorEditor}/interactivity.js +7 -6
package/src/pages/{Theme → ColorEditor}/style.js +12 -1
package/src/pages/{Theme → ColorEditor}/themingTools.js +12 -12
package/src/pages/Editor/index.js +9 -7
package/src/pages/Editor/layers.js +14 -14
package/src/pages/Editor/scene.js +9 -7
package/src/pages/Editor/tools.js +22 -22
package/{.legacy → src/pages/Export}/_tools_old.js +6 -7
package/src/pages/Export/const.js +4 -3
package/src/pages/Export/description.js +87 -58
package/src/pages/Export/header.js +37 -0
package/src/pages/Export/index.js +39 -48
package/src/pages/Export/scene.js +61 -98
package/src/pages/Export/state.js +5 -11
package/src/pages/Export/style.js +28 -0
package/src/pages/Export/tools.js +86 -41
package/src/pages/Icons/index.js +69 -73
package/src/pages/Icons/style.js +18 -0
package/src/pages/Library/index.js +47 -24
package/src/pages/Library/style.js +43 -0
package/src/pages/PageProto.js +26 -0
package/src/pages/Shapes/index.js +204 -54
package/src/pages/Shapes/style.js +28 -0
package/src/pages/Spaces/boxModel.js +3 -0
package/src/pages/Spaces/index.js +47 -23
package/{.legacy → src/pages/Spaces}/preview.js +14 -14
package/src/pages/Spaces/sequence.js +1 -30
package/src/pages/Spaces/state.js +14 -12
package/{.legacy → src/pages/Spaces}/style.js +3 -0
package/src/pages/Typography/docFonts.js +128 -0
package/src/pages/Typography/docStyles.js +97 -0
package/src/pages/Typography/index.js +36 -28
package/src/pages/Typography/shared.js +3 -2
package/src/pages/Typography/state.js +8 -9
package/src/pages/Typography/style.js +11 -0
package/src/pages/Typography/typeScale.js +82 -63
package/src/pages/index.js +23 -15
package/src/protect.js +114 -0
package/src/state.js +3 -0
package/src/style.js +12 -15
package/src/test.js +30 -0
package/svgSprite.config.js +1 -2
package/test/index.test.js +5 -0
package/.legacy/index copy.js +0 -45
package/.vscode/extensions.json +0 -5
package/index.js +0 -44
package/src/assets/dark.png +0 -0
package/src/assets/mask1.png +0 -0
package/src/assets/mask2.png +0 -0
package/src/assets/shapes.png +0 -0
package/src/assets/space.png +0 -0
package/src/assets/type.png +0 -0
package/src/components/Aside.js +0 -101
package/src/components/Banner.js +0 -58
package/src/components/ColorText.js +0 -29
package/src/components/ColorsPalette.js +0 -69
package/src/components/ColumnParagrphs.js +0 -23
package/src/components/ContinueButton.js +0 -14
package/src/components/DesignComponent.js +0 -80
package/src/components/FontText.js +0 -193
package/src/components/Header.js +0 -50
package/src/components/HeaderHeading.js +0 -23
package/src/components/IconsGroup.js +0 -60
package/src/components/Page.js +0 -135
package/src/components/ResponsivePreview.js +0 -44
package/src/components/Route.js +0 -1
package/src/components/ShapePreview.js +0 -63
package/src/components/ShapeSet.js +0 -85
package/src/components/SlidersWithResponsive.js +0 -23
package/src/components/SpacingButton/actionButtons.js +0 -41
package/src/components/SpacingButton/dropdown.js +0 -114
package/src/components/SpacingButton/index.js +0 -248
package/src/components/SpacingButton/props.js +0 -45
package/src/components/SpacingPreview.js +0 -154
package/src/components/SpacingTable.js +0 -210
package/src/components/ThemeButtons.js +0 -42
package/src/components/UploadImage.js +0 -61
package/src/components/Widget.js +0 -1
package/src/components/index.js +0 -25
package/src/pages/Account/__/index.js +0 -241
package/src/pages/Color/globalThemes.js +0 -30
package/src/pages/Color/palette.js +0 -35
package/src/pages/Components/grid.js +0 -99
package/src/pages/Components/index.js +0 -37
package/src/pages/Components/sidebar.js +0 -28
package/src/pages/Components/style.js +0 -16
package/src/pages/DesignSystem/Dashboard/banners.js +0 -38
package/src/pages/DesignSystem/Dashboard/designElements.js +0 -124
package/src/pages/DesignSystem/Dashboard/index.js +0 -22
package/src/pages/DesignSystem/Dashboard/quickstart.js +0 -86
package/src/pages/DesignSystem/Dashboard/state.js +0 -118
package/src/pages/DesignSystem/Dashboard/summary.js +0 -40
package/src/pages/DesignSystem/index.js +0 -187
package/src/pages/Export/gist.js +0 -23
package/src/pages/Fonts/fontFaces.js +0 -50
package/src/pages/Fonts/fontFamilies.js +0 -47
package/src/pages/Fonts/index.js +0 -15
package/src/pages/Fonts/state.js +0 -5
package/src/pages/Init/ChooseEnvironment.js +0 -104
package/src/pages/Init/CreateDocumentTheme.js +0 -166
package/src/pages/Init/CreatePalette.js +0 -72
package/src/pages/Init/FontText.js +0 -23
package/src/pages/Init/Personalize/fields.js +0 -109
package/src/pages/Init/Personalize/icon.js +0 -42
package/src/pages/Init/Personalize/index.js +0 -37
package/src/pages/Init/index.js +0 -36
package/src/pages/Library/disabled.js +0 -38
package/src/pages/MediaQuery/index.js +0 -46
package/src/pages/MediaQuery/lists.js +0 -285
package/src/pages/MediaQuery/state.js +0 -150
package/src/pages/MediaQuery/typeScale.js +0 -69
package/src/pages/Shapes/shapeSet.js +0 -133
package/src/pages/State/index.js +0 -86
package/src/pages/Theme/index.js +0 -197
package/src/pages/Theme/preview.js +0 -153
package/src/pages/Typography/collection.js +0 -110
package/src/pages/Typography/documentStyles.js +0 -125
package/src/pages/Typography/rangeButtons.js +0 -58
package/src/pages/Typography/stylesHelpers.js +0 -30
/package/{.legacy/boxModel.js → src/data/favorites.js} +0 -0
/package/{.legacy/sequence.js → src/data/filters.js} +0 -0
/package/src/pages/{Theme → ColorEditor}/ntc.js +0 -0

package/src/data/library/parent-mode/index.js ADDED Viewed

@@ -0,0 +1,69 @@
+'use strict'
+import CATEGORIES from '../../categories'
+import style from './style'
+import { Shape, Icon, UserBundle, Block } from '@symbo.ls/all'
+const key = 'parent-mode'
+const title = 'Parent Mode'
+const description = ''
+const category = CATEGORIES[CATEGORIES.length - 1]
+const component = {
+  proto: [Shape, Block],
+  style,
+  props: (el, s) => ({
+    round: 'Z',
+    theme: s.sceneTheme === 'light' ? 'purple2' : 'purple',
+    padding: 'B B2 B2',
+    icon: 'checkMedium'
+  }),
+  icon: { proto: Icon },
+  h5: 'Welcome to parent Mode',
+  description: {
+    proto: UserBundle,
+    users: { ...[{}, {}, {}] },
+    span: 'You’ll now be able to chat with tutor privately. No other participants will see the messages.'
+  }
+}
+const code = `{
+  round: 'Z',
+  theme: 'purple',
+  icon: 'checkMedium',
+  h2: 'Welcome to parent Mode',
+  description: {
+    users: [{}, {}, {}],
+    p: 'You’ll now be able to chat with tutor privately. No other participants will see the messages.'
+  }
+}`
+const defaultState = {}
+const defaultProps = {
+  round: 'Z',
+  theme: 'purple',
+  icon: 'checkMedium',
+  title: 'Welcome to parent Mode',
+  users: [{}, {}, {}],
+  description: 'You’ll now be able to chat with tutor privately. No other participants will see the messages.'
+}
+const settings = {
+  gridOptions: { colspan: 15, rowspan: 2 }
+}
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+  defaultProps,
+  settings,
+  interactivity: [],
+  dataTypes: []
+}

package/src/data/library/parent-mode/style.js ADDED Viewed

@@ -0,0 +1,25 @@
+'use strict'
+export default {
+  boxSizing: 'border-box',
+  position: 'relative',
+  display: 'block',
+  '> svg': {
+    position: 'absolute',
+    top: '1.2em',
+    right: '1.2em',
+    color: 'rgba(215, 100, 185, .2)'
+  },
+  '> div': {
+    alignItems: 'flex-start',
+    '> div': { marginTop: '0.236em' }
+  },
+  h5: {
+    margin: 0,
+    marginBottom: '0.618em'
+  },
+  span: {
+    maxWidth: `${314 / 14}em`,
+    lineHeight: '1.382em'
+  }
+}

package/src/index.html ADDED Viewed

@@ -0,0 +1,57 @@
+<html background="#000">
+<head>
+  <title>Symbols Editor</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta charset="UTF-8">
+  <meta name="author" content="SymbolsApp">
+  <meta name="keywords" content="UIkit, Design System, Platform, Javascript, CSS, Less, Sass, Component, React, Angular, Vue, Svelte, HTML, Haml, Jade, Bootstrap, Semantic UI, Material, ">
+  <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. ">
+  <link rel="manifest" href="../app.webmanifest" crossorigin="use-credentials">
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177072616-1"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', 'UA-177072616-1');
+  </script>
+  <script>
+    window['_fs_debug'] = false;
+    window['_fs_host'] = 'fullstory.com';
+    window['_fs_script'] = 'edge.fullstory.com/s/fs.js';
+    window['_fs_org'] = '14YFSY';
+    window['_fs_namespace'] = 'FS';
+    (function(m,n,e,t,l,o,g,y){
+        if (e in m) {if(m.console && m.console.log) { m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].');} return;}
+        g=m[e]=function(a,b,s){g.q?g.q.push([a,b,s]):g._api(a,b,s);};g.q=[];
+        o=n.createElement(t);o.async=1;o.crossOrigin='anonymous';o.src='https://'+_fs_script;
+        y=n.getElementsByTagName(t)[0];y.parentNode.insertBefore(o,y);
+        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)};
+        g.anonymize=function(){g.identify(!!0)};
+        g.shutdown=function(){g("rec",!1)};g.restart=function(){g("rec",!0)};
+        g.log = function(a,b){g("log",[a,b])};
+        g.consent=function(a){g("consent",!arguments.length||a)};
+        g.identifyAccount=function(i,v){o='account';v=v||{};v.acctId=i;g(o,v)};
+        g.clearUserCookie=function(){};
+        g.setVars=function(n, p){g('setVars',[n,p]);};
+        g._w={};y='XMLHttpRequest';g._w[y]=m[y];y='fetch';g._w[y]=m[y];
+        if(m[y])m[y]=function(){return g._w[y].apply(this,arguments)};
+        g._v="1.3.0";
+    })(window,document,window['_fs_namespace'],'script','user');
+  </script>
+  <script defer data-domain="symbols.app" src="https://plausible.io/js/plausible.js"></script>
+  <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
+</head>
+<body background="#000">
+  <style type="text/css">body {background: #000;}</style>
+  <script src="./index.js"></script>
+</body>
+</html>

package/src/index.js ADDED Viewed

@@ -0,0 +1,7 @@
+'use strict'
+import './config'
+import DOM from 'domql-preview'
+import App from './app'
+export default DOM.create(App)

package/src/pages/Account/index.js CHANGED Viewed

@@ -1,32 +1,41 @@
 'use strict'
-import { Link, Img, SquareButton, ClickableItem } from '@symbo.ls/components'
+import { Text, Block, Link, SquareButton, Img, ClickableItem, SelectToolWithCaption, Grid, CheckButton } from '@symbo.ls/all'
+// import { account } from '../SignUp'
+import setUpProject from './setUpProject'
+import PageProto from '../PageProto'
+import { logout } from '@symbo.ls/auth'
 const sideBar = {
   tag: 'aside',
+  proto: Block,
   style: {
+    height: '100%',
+    borderRight: '1px solid rgba(255, 255, 255, .06)'
   },
   props: {
     flexFlow: 'column',
     flexAlign: 'flex-start space-between',
-    padding: '0 C 0 0',
-    height: '100%',
-    style: { borderRight: '1px solid rgba(255, 255, 255, .06)' }
+    padding: '0 C 0 0'
   },
   nav: {
+    proto: Block,
     props: {
       flexFlow: 'column',
       gap: 'A1'
     },
-    childExtend: {
+    childProto: {
       tag: 'a',
-      extend: [SquareButton, Link, ClickableItem],
+      proto: [SquareButton, Link, ClickableItem],
       props: {
         theme: 'quaternary',
         padding: 0,
         boxSize: 'B1 B1'
-      }
+      },
+      style: { padding: 0 }
     },
     personal: {
@@ -46,9 +55,12 @@ const sideBar = {
         display: 'block'
       },
       image: {
-        extend: Img,
-        props: {
-          src: 'https://ui-avatars.com/api/?font-size=0.5&size=150&name=Rockstar',
+        proto: Img,
+        attr: {
+          // src: 'https://p194.p3.n0.cdn.getcloudapp.com/items/yAubz2KN/IMG_2375.jpg?v=c59a92ea47a959e386e952c3d84c08e5'
+          src: 'https://ui-avatars.com/api/?font-size=0.5&size=150&name=Rockstar'
+        },
+        style: {
           width: '100%',
           height: '100%',
           borderRadius: '100%'
@@ -78,14 +90,15 @@ const sideBar = {
   nav2: {
     tag: 'nav',
+    proto: Block,
     props: {
       flexFlow: 'column',
       gap: 'A1'
     },
     style: { svg: { color: 'rgba(255, 255, 255, .25)' } },
-    childExtend: {
-      extend: [SquareButton, Link],
+    childProto: {
+      proto: [SquareButton, Link],
       props: {
         theme: 'quaternary',
         padding: 0,
@@ -96,16 +109,133 @@ const sideBar = {
     info: { props: { icon: 'info' } },
     logout: {
-      props: { icon: 'logout', href: '/logout' }
+      props: { icon: 'upload' },
+      on: {
+        click: (ev, el, s) => {
+          logout()
+        }
+      }
     }
   }
 }
-export const Account = {
-  sideBar,
-  on: {
-    render: element => {
+const fillFields = {
+  proto: [Block, Grid],
+  props: {
+    columns: 'repeat(2, 1fr)',
+    columnGap: 'C',
+    rowGap: 'C2'
+  },
+  childProto: {
+    proto: SelectToolWithCaption,
+    style: {
+      '> input': { width: '270x', minWidth: '270px', height: '42px' }
+    },
+    caption: {},
+    element: {
+      style: {
+        minWidth: `${270 / 16}em`,
+        height: `${42 / 16}em`
+      },
+      buttons: { ...[{ props: { theme: 'transparent' } }] }
+    }
+  },
+  ...[
+    {
+      caption: { props: { text: 'Your Username' } },
+      element: {
+        tag: 'input',
+        attr: {
+          value: 'nikoloza'
+        }
+      }
+    },
+    {
+      caption: { props: { text: 'Your role' } },
+      element: {
+        title: { props: { text: 'Design' } }
+      }
+    },
+    {
+      caption: { props: { text: 'Country and region' } },
+      element: {
+        props: { gap: 'W' },
+        title: {
+          props: { text: 'Georgia' },
+          style: {
+            '&::before': {
+              content: '"🇬🇪"'
+            }
+          }
+        }
+      }
+    },
+    {
+      caption: { props: { text: 'Time-zone' } },
+      element: {
+        props: { gap: 'W' },
+        title: {
+          props: { text: 'Tbilisi(GMT+4)' }
+        }
+      }
+    }
+  ]
+}
+const personalAccount = {
+  proto: Block,
+  props: {
+    // padding: '0 0 0 E',
+    flexFlow: 'column',
+    flexAlign: 'flex-start flex-start',
+    gap: 'C2'
+  },
+  caption: {
+    proto: [Text, Block],
+    props: {
+      text: 'Your personal account'
     }
+  },
+  fields: {
+    proto: { fillFields }
+  },
+  button: {
+    proto: CheckButton,
+    props: {
+      text: 'Save Updates'
+    },
+    style: {
+      background: '#0079FD',
+      '> svg': { color: 'white' },
+      '&:hover': { background: '#0079FD' }
+    }
+  }
+}
+export default {
+  proto: PageProto,
+  props: {
+    flexAlign: 'flex-start flex-start',
+    padding: 'C1 0 D1 0',
+    gap: 'E'
+  },
+  define: { routes: param => param },
+  state: {
+    activeTab: 'personal'
+  },
+  sideBar,
+  routes: {
+    personal: personalAccount,
+    project: setUpProject
+  },
+  page: {
+    content: (el, s) => ({ proto: el.parent.routes[s.activeTab] })
   }
 }

package/src/pages/Account/{__/setUpProject.js → setUpProject.js} RENAMED Viewed

@@ -1,23 +1,23 @@
 'use strict'
-import { Text, Block, Img, SquareButton, SelectField } from '@symbo.ls/components'
-import { SetUp } from '../..'
+import { Text, Block, Img, SquareButton, SelectTool } from '@symbo.ls/all'
+import { SetUp } from '..'
 export default {
   caption: {
-    extend: [Block, Text],
+    proto: [Block, Text],
     props: {
       text: 'Settings for Rockstar',
       padding: '0 0 C2 0'
     }
   },
   content: {
-    extend: SetUp,
+    proto: SetUp,
     style: { padding: 0 },
     upload: {
       caption: {},
       content: {
-        extend: Block,
+        proto: Block,
         props: {
           flexFlow: 'column',
           gap: 'A'
@@ -25,7 +25,7 @@ export default {
         style: { padding: `${17 / 16}em ${28 / 16}em ${10 / 16}em ${28 / 16}em` },
         input: {},
         icon: {
-          extend: Img,
+          proto: Img,
           attr: {
             // src: 'https://p194.p3.n0.cdn.getcloudapp.com/items/yAubz2KN/IMG_2375.jpg?v=c59a92ea47a959e386e952c3d84c08e5'
             src: 'https://ui-avatars.com/api/?font-size=0.5&size=150&name=Rockstar'
@@ -39,13 +39,13 @@ export default {
         },
         p: null,
         buttons: {
-          extend: Block,
+          proto: Block,
           props: {
             flexAlign: 'center space-between',
             gap: 'Y'
           },
-          childExtend: {
-            extend: SquareButton,
+          childProto: {
+            proto: SquareButton,
             props: { theme: 'quaternary', round: 'Y' },
             style: {
               padding: 0,
@@ -126,7 +126,7 @@ export default {
           {
             caption: { props: { text: 'UI Framework' } },
             element: {
-              extend: SelectField,
+              proto: SelectTool,
               title: {
                 props: { text: 'React' },
                 style: { color: 'white' }

package/src/pages/Color/colors.js ADDED Viewed

@@ -0,0 +1,58 @@
+'use strict'
+import { Button, SectionHeader, ColorTemplate } from '@symbo.ls/all'
+export default {
+  tag: 'section',
+  header: {
+    proto: SectionHeader,
+    props: { padding: 'C 0 0 0' },
+    heading: {
+      caption: 'Color Palette',
+      p: { text: 'Document styling and theming' }
+    }
+  },
+  nav: {
+    style: {
+      display: 'flex',
+      gap: '1.2em',
+      alignItems: 'center'
+    },
+    colors: {
+      style: {
+        display: 'flex',
+        gap: '12px'
+      },
+      content: (el, s) => {
+        if (!el.__root.state.CONFIG) return
+        const { COLOR } = el.__root.state.CONFIG
+        const Colors = {}
+        Object.keys(COLOR).map(v => {
+          Colors[v] = { state: COLOR[v] }
+        })
+        return {
+          childProto: ColorTemplate,
+          tag: 'fragment',
+          ...Colors
+        }
+      }
+    },
+    plus: {
+      proto: Button,
+      props: {
+        round: 8,
+        icon: 'plus'
+      },
+      style: {
+        height: `26px`,
+        width: `26px`,
+        background: 'rgba(255, 255, 255, .06)',
+        color: 'white'
+      }
+    }
+  }
+}

package/src/pages/Color/documentThemes.js ADDED Viewed

@@ -0,0 +1,101 @@
+'use strict'
+import { Notification, Flex, ClickableItem, SectionHeader, Shape, Block, IconText, Link } from '@symbo.ls/all'
+// import { SectionHeader } from 'components/Header'
+export default {
+  tag: 'section',
+  header: {
+    proto: SectionHeader,
+    props: { padding: 'C 0 0 0' },
+    heading: {
+      caption: 'Document',
+      p: { text: 'Document styling and theming provides global themes of the entire app, imagine it as a <body> styling' }
+    }
+  },
+  mode: {
+    proto: Flex,
+    tag: 'nav',
+    style: {
+      gap: 16
+    },
+    childProto: {
+      proto: [Notification, ClickableItem, Link],
+      style: {
+        opacity: '.5',
+        textDecoration: 'none'
+      },
+      props: {
+        gap: 'Z',
+        round: 'Z',
+        padding: 'Z1 D2 A A1',
+        href: '/colors/documentThemes/addit-theme'
+      },
+      icon: {
+        proto: [Shape, Block, IconText],
+        props: {
+          size: 'Z',
+          padding: 'Z',
+          round: 'Z'
+        }
+      },
+      article: {
+        props: { gap: 'X' },
+        caption: {
+          style: { fontWeight: 'bold' },
+          props: { size: 'B' }
+        },
+        p: {
+          props: { size: 'Y' },
+          style: { '> span': { fontWeight: 'bold' } }
+        }
+      }
+    },
+    ...[
+      {
+        props: el => {
+          if (!el.__root.state.CONFIG) return
+          const { THEME } = el.__root.state.CONFIG
+          return { theme: THEME.document.value }
+        },
+        icon: {
+          props: { theme: 'lightMode', icon: 'sun' }
+        },
+        article: {
+          caption: { text: 'Light' },
+          p: {
+            text: 'prefers-color-scheme:',
+            span: ' Light'
+          }
+        }
+      }, {
+        if: el => {
+          if (!el.__root.state.CONFIG) return
+          const { THEME } = el.__root.state.CONFIG
+          return THEME.document.variants && THEME.document.variants.dark
+        },
+        props: el => {
+          if (!el.__root.state.CONFIG) return
+          const { THEME } = el.__root.state.CONFIG
+          return { theme: THEME.document.value }
+        },
+        style: { color: 'white' },
+        icon: {
+          props: { theme: 'darkMode', icon: 'moon' }
+        },
+        article: {
+          caption: { text: 'Dark' },
+          p: {
+            text: 'prefers-color-scheme:',
+            span: ' Dark'
+          }
+        }
+      }
+    ]
+  }
+}

package/src/pages/Color/index.js CHANGED Viewed

@@ -1,17 +1,20 @@
 'use strict'
-import globalThemes from './globalThemes'
-import palette from './palette'
+import style from './style'
+import { PageProto } from '..'
+import palette from './colors'
+import documentThemes from './documentThemes'
 import themes from './themes'
-export const Color = {
+export default {
+  style,
   key: 'colors',
-  props: { gap: 'A' },
+  proto: [PageProto],
-  globalThemes,
-  Line: {},
+  documentThemes,
   palette,
-  Line_2: {},
   themes
 }

package/src/pages/Color/style.js ADDED Viewed

@@ -0,0 +1,7 @@
+'use strict'
+export default {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '68px',
+}