@symbo.ls/preview 0.0.12 → 0.0.13

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 (12) hide show
  1. package/package.json +1 -1
  2. package/src/pages/Color/globalThemes.js +30 -0
  3. package/src/pages/Color/index.js +3 -3
  4. package/src/pages/Color/themes.js +4 -88
  5. package/src/pages/DesignSystem/index.js +24 -6
  6. package/src/pages/Export/scene.js +3 -8
  7. package/src/pages/{Typography/docFonts.js → Fonts/index.js} +12 -8
  8. package/src/pages/Fonts/state.js +5 -0
  9. package/src/pages/Typography/index.js +1 -4
  10. package/src/pages/index.js +1 -0
  11. package/src/pages/Color/documentThemes.js +0 -80
  12. /package/src/pages/Color/{colors.js → palette.js} +0 -0
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@symbo.ls/preview",
3
3
  "description": "",
4
4
  "author": "",
5
- "version": "0.0.12",
5
+ "version": "0.0.13",
6
6
  "repository": "https://github.com/rackai/editor",
7
7
  "main": "src/index.js",
8
8
  "scripts": {
package/src/pages/Color/globalThemes.js ADDED
@@ -0,0 +1,30 @@
1
+ 'use strict'
2
+
3
+ import { GlobalThemeTemplate, Flex, SectionHeader, Link } from '@symbo.ls/components'
4
+
5
+ export default {
6
+ header: {
7
+ extend: SectionHeader,
8
+ state: {
9
+ title: 'Global Themes',
10
+ p: 'Document styling and theming provides global themes of the entire app, imagine it as a <body> styling'
11
+ }
12
+ },
13
+
14
+ modes: {
15
+ extend: Flex,
16
+ props: { gap: 'A' },
17
+
18
+ childExtend: [GlobalThemeTemplate, Link],
19
+
20
+ $setCollection: () => [{
21
+ title: 'Light',
22
+ key: 'light',
23
+ icon: 'sun'
24
+ }, {
25
+ title: 'Dark',
26
+ key: 'dark',
27
+ icon: 'moon'
28
+ }]
29
+ }
30
+ }
package/src/pages/Color/index.js CHANGED
@@ -2,8 +2,8 @@
2
2
 
3
3
  import { Line } from '@symbo.ls/components'
4
4
 
5
- import documentThemes from './documentThemes'
6
- import palette from './colors'
5
+ import globalThemes from './globalThemes'
6
+ import palette from './palette'
7
7
  import themes from './themes'
8
8
 
9
9
  export const Color = {
@@ -12,7 +12,7 @@ export const Color = {
12
12
  gap: '68px'
13
13
  },
14
14
 
15
- documentThemes,
15
+ globalThemes,
16
16
  line: { extend: Line },
17
17
  palette,
18
18
  line2: { extend: Line },
package/src/pages/Color/themes.js CHANGED
@@ -1,86 +1,6 @@
1
1
  'use strict'
2
2
 
3
- import { IconText, Link, Flex, SectionHeader, Grid } from '@symbo.ls/components'
4
-
5
- const style = {
6
- cursor: 'pointer',
7
-
8
- '> *': {
9
- transition: '350ms',
10
- transitionProperty: 'opacity, transform',
11
- opacity: 0.35
12
- },
13
-
14
- '&:hover > *': {
15
- opacity: 1,
16
- transform: 'scale(1.015)'
17
- }
18
- }
19
-
20
- export const ThemeTemplate = {
21
- extend: [Link, Flex],
22
-
23
- props: (el, s) => ({
24
- flow: 'column',
25
- href: `/theme/${s.key}`,
26
- padding: 'A Z1',
27
- fontWeight: '400',
28
- color: 'white',
29
-
30
- colors: {
31
- margin: '0 -Z',
32
- round: 'A2',
33
- overflow: 'hidden'
34
- },
35
-
36
- title: {
37
- size: 'Y',
38
- margin: 'Z 0 0 0'
39
- },
40
-
41
- style
42
- }),
43
-
44
- colors: {
45
- extend: Flex,
46
-
47
- childExtend: {
48
- extend: [IconText, Flex],
49
- props: {
50
- align: 'center flex-start',
51
- flex: 1,
52
- padding: 'Z1 A'
53
- }
54
- },
55
-
56
- just: {
57
- if: (el, s) => !s['@dark'] && !s['@light'],
58
- props: (el, s) => ({
59
- theme: s.key,
60
- height: 'A',
61
- boxSizing: 'content-box',
62
- padding: 'Z1 A'
63
- })
64
- },
65
-
66
- sun: {
67
- if: (el, s) => s['@light'],
68
- props: (el, s) => ({
69
- icon: { name: 'sun' },
70
- theme: `${s.key} @light`
71
- })
72
- },
73
-
74
- moon: {
75
- if: (el, s) => s['@dark'],
76
- props: (el, s) => ({
77
- theme: `${s.key} @dark`,
78
- icon: { name: 'moon' }
79
- })
80
- }
81
- },
82
- title: { text: (el, state) => state.key }
83
- }
3
+ import { ThemeTemplate, SectionHeader, Grid } from '@symbo.ls/components'
84
4
 
85
5
  const mapThemes = (el, s) => {
86
6
  if (!el.context.SYSTEM) return
@@ -105,16 +25,12 @@ export default {
105
25
  content: {
106
26
  extend: Grid,
107
27
  props: {
108
- columns: 'repeat(6, 1fr)',
109
- gap: 'A',
28
+ columns: 'repeat(5, 1fr)',
29
+ gap: 'C2',
110
30
  margin: '0 -Z'
111
31
  },
112
32
 
113
33
  childExtend: ThemeTemplate,
114
- $setCollection: (el, s) => {
115
- const c = mapThemes(el, s)
116
- console.log(c)
117
- return c
118
- }
34
+ $setCollection: (el, s) => mapThemes(el, s)
119
35
  }
120
36
  }
package/src/pages/DesignSystem/index.js CHANGED
@@ -1,13 +1,14 @@
1
1
  'use strict'
2
2
 
3
- import { Flex, Link, SquareButton } from '@symbo.ls/components'
3
+ import { ClickableItem, Flex, Link, SquareButton } from '@symbo.ls/components'
4
4
  import { PageExtend,
5
5
  Color,
6
6
  ColorEditor,
7
7
  Shapes,
8
8
  Spaces,
9
9
  Icons,
10
- Typography
10
+ Typography,
11
+ Fonts
11
12
  } from '..'
12
13
 
13
14
  const NAV = [{
@@ -33,7 +34,15 @@ const NAV = [{
33
34
  }, {
34
35
  props: {
35
36
  icon: 'icons outline colored',
36
- href: '/icons'
37
+ href: '/icons',
38
+ $active: {
39
+ icon: 'icons colored'
40
+ }
41
+ }
42
+ }, {
43
+ props: {
44
+ icon: 'typeface colored',
45
+ href: '/fonts'
37
46
  }
38
47
  }, {
39
48
  props: {
@@ -59,6 +68,7 @@ export const DesignSystem = {
59
68
  maxWidth: '100%',
60
69
  width: '100%',
61
70
  flow: 'row',
71
+ align: 'flex-start flex-start',
62
72
  gap: 'B1',
63
73
  padding: 'D2 A B1'
64
74
  },
@@ -69,7 +79,7 @@ export const DesignSystem = {
69
79
  '/theme': ColorEditor,
70
80
  // '/theme': Theme,
71
81
  '/typography': Typography,
72
- // '/font': Font,
82
+ '/fonts': Fonts,
73
83
  '/space': Spaces,
74
84
  // '/sequence': Sequence,
75
85
  '/shape': Shapes,
@@ -81,14 +91,22 @@ export const DesignSystem = {
81
91
  sidebar: {
82
92
  tag: 'nav',
83
93
  extend: Flex,
84
- childExtend: [Link, SquareButton],
94
+ childExtend: {
95
+ extend: [ClickableItem, Link, SquareButton],
96
+ props: ({ props }) => ({
97
+ active: props.href === window.location.pathname,
98
+ theme: null
99
+ })
100
+ },
85
101
 
86
102
  props: {
87
103
  gap: 'B1',
88
104
  flow: 'column',
89
105
  background: 'transparent',
90
106
  color: 'gray7',
91
- fontSize: 'A2'
107
+ fontSize: 'A2',
108
+ position: 'sticky',
109
+ top: 'E'
92
110
  },
93
111
 
94
112
  ...NAV
package/src/pages/Export/scene.js CHANGED
@@ -39,14 +39,9 @@ export default {
39
39
  }
40
40
  }
41
41
  },
42
- comp: (el, s) => {
43
- console.warn(s)
44
- return {
45
- extend: [s.component],
46
- props: {
47
- }
48
- }
49
- },
42
+ comp: (el, s) => ({
43
+ extend: [s.component],
44
+ }),
50
45
 
51
46
  on: {
52
47
  initUpdate: (el, s) => {
package/src/pages/{Typography/docFonts.js → Fonts/index.js} RENAMED
@@ -1,7 +1,9 @@
1
1
  'use strict'
2
2
 
3
3
  import { Grid, FontObject, FontFamilyObject, Line } from '@symbo.ls/components'
4
- import { TypeSection } from './shared'
4
+ import { TypeSection } from '../Typography/shared'
5
+
6
+ import { state } from './state'
5
7
 
6
8
  const mapFonts = (el, s) => {
7
9
  if (!el.context.SYSTEM) return
@@ -16,7 +18,7 @@ const mapFonts = (el, s) => {
16
18
 
17
19
  return {
18
20
  title: v,
19
- href: `/typography/document-fonts/font-settings/${v}`,
21
+ href: `/fonts/font-settings/${v}`,
20
22
  labels: [
21
23
  { icon: 'variableFont', text: fontWeightCaption }
22
24
  ]
@@ -34,13 +36,13 @@ const mapFontFamilies = (el, s) => {
34
36
  if (v === 'default') return
35
37
  return {
36
38
  title: v,
37
- href: `/typography/font-family/${v}`,
39
+ href: `/fonts/font-family/${v}`,
38
40
  val
39
41
  }
40
42
  }).filter(v => v)
41
43
  }
42
44
 
43
- const Fonts = {
45
+ const FontFaces = {
44
46
  extend: TypeSection,
45
47
  header: {
46
48
  state: {
@@ -48,7 +50,7 @@ const Fonts = {
48
50
  p: 'Document @font-face, default and backup fonts',
49
51
  nav: [{
50
52
  icon: 'plus',
51
- href: '/typography/upload-font'
53
+ href: '/fonts/upload-font'
52
54
  }]
53
55
  }
54
56
  },
@@ -74,7 +76,7 @@ const FontFamilies = {
74
76
  p: 'Setup a set and fallback fonts as font families',
75
77
  nav: [{
76
78
  icon: 'plus',
77
- href: '/typography/add-font-family'
79
+ href: '/fonts/add-font-family'
78
80
  }]
79
81
  }
80
82
  },
@@ -91,8 +93,10 @@ const FontFamilies = {
91
93
  }
92
94
  }
93
95
 
94
- export default {
95
- Fonts,
96
+ export const Fonts = {
97
+ state,
98
+
99
+ FontFaces,
96
100
  line: { extend: Line },
97
101
  FontFamilies
98
102
  }
package/src/pages/Fonts/state.js ADDED
@@ -0,0 +1,5 @@
1
+ 'use strict'
2
+
3
+ export const state = {
4
+ sampleText: 'Today is a big day for our tribe. The year ends.'
5
+ }
package/src/pages/Typography/index.js CHANGED
@@ -4,7 +4,6 @@ import { SectionHeader } from '@symbo.ls/components'
4
4
 
5
5
  import state from './state'
6
6
 
7
- import documentFonts from './docFonts'
8
7
  import documentStyle from './docStyles'
9
8
  import typeScale from './typeScale'
10
9
 
@@ -14,9 +13,7 @@ export const Typography = {
14
13
  state,
15
14
 
16
15
  routes: {
17
- '/': documentFonts,
18
- '/document-fonts': documentFonts,
19
- '/type-scale': typeScale,
16
+ '/': typeScale,
20
17
  '/document-styles': documentStyle
21
18
  },
22
19
 
package/src/pages/index.js CHANGED
@@ -3,6 +3,7 @@
3
3
  export * from './PageExtend'
4
4
  export * from './Components'
5
5
  export * from './Export'
6
+ export * from './Fonts'
6
7
  export * from './Icons'
7
8
  export * from './Library'
8
9
  export * from './Color'
package/src/pages/Color/documentThemes.js DELETED
@@ -1,80 +0,0 @@
1
- 'use strict'
2
-
3
- import { Notification, Flex, ClickableItem, SectionHeader, IconText, Link } from '@symbo.ls/components'
4
-
5
- const ThemeItem = {
6
- extend: [Notification, ClickableItem],
7
-
8
- // if: ({ context, state }) => {
9
- // if (!context?.SYSTEM) return
10
- // const { THEME } = context.SYSTEM
11
- // console.log(!!THEME.document[`@${state.key}`])
12
- // return !!THEME.document[`@${state.key}`]
13
- // },
14
-
15
- props: ({ state }) => ({
16
- opacity: '.5',
17
- textDecoration: 'none',
18
- gap: 'Z',
19
- round: 'Z',
20
- padding: 'Z1 D2 A A1',
21
- theme: `document @${state.key}`,
22
- fontWeight: '400',
23
- href: `/colors/document-theme/${state.key}`,
24
-
25
- icon: {
26
- size: 'Z',
27
- padding: 'Z',
28
- round: 'Z',
29
- theme: `sepia @${state.key}`,
30
- icon: state.icon
31
- },
32
- article: {
33
- gap: 'X',
34
- title: {
35
- size: 'B'
36
- },
37
- p: {
38
- fontSize: 'Y',
39
- text: state.key
40
- }
41
- }
42
- }),
43
-
44
- icon: { extend: IconText },
45
- article: {
46
- title: {
47
- text: ({ state }) => state.title
48
- },
49
- p: {
50
- span: ({ state }) => 'prefers-color-scheme: '
51
- }
52
- }
53
- }
54
-
55
- export default {
56
- header: {
57
- extend: SectionHeader,
58
- state: {
59
- title: 'Global Themes',
60
- p: 'Document styling and theming provides global themes of the entire app, imagine it as a <body> styling'
61
- }
62
- },
63
-
64
- modes: {
65
- extend: Flex,
66
- props: { gap: 'A' },
67
-
68
- childExtend: [ThemeItem, Link],
69
-
70
- $setCollection: () => [{
71
- title: 'Light',
72
- key: 'light',
73
- icon: 'sun'
74
- }, {
75
- title: 'Dark',
76
- key: 'dark',
77
- icon: 'moon'
78
- }]
79
- }
80
- }
/package/src/pages/Color/{colors.js → palette.js} RENAMED
File without changes