march-ui 0.0.1 → 0.0.3

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 (13) hide show
  1. package/ContextMenu/index.css +6 -5
  2. package/MenuItem/colors.css +4 -4
  3. package/README.md +13 -11
  4. package/Tab/index.d.ts +3 -0
  5. package/Tab/index.jsx +13 -0
  6. package/Tabs/colors.css +54 -0
  7. package/Tabs/index.css +36 -0
  8. package/Tabs/index.d.ts +3 -0
  9. package/Tabs/index.jsx +35 -0
  10. package/UI/colors.css +27 -5
  11. package/index.d.ts +2 -0
  12. package/index.js +2 -0
  13. package/package.json +1 -1
package/ContextMenu/index.css CHANGED
@@ -1,13 +1,14 @@
1
1
  .contextmenu {
2
2
  width: 12em;
3
- padding-top: 0.25em;
4
- padding-bottom: 0.25em;
5
- border-radius: 0.25em;
3
+ padding-top: 0.5em;
4
+ padding-bottom: 0.5em;
5
+ border-radius: 0.5em;
6
6
  user-select: none;
7
7
  box-sizing: border-box;
8
8
  background-color: var(--contextmenu-background-color);
9
9
  border: 1px solid var(--contextmenu-border-color);
10
10
  box-shadow: 0 0 2em var(--contextmenu-shadow-color);
11
+ overflow: hidden;
11
12
  }
12
13
 
13
14
  .contextmenu--shown {
@@ -19,6 +20,6 @@
19
20
  }
20
21
 
21
22
  .contextmenu .splitter.splitter--horizontal {
22
- margin-top: 0.25em;
23
- margin-bottom: 0.25em;
23
+ margin-top: 0.5em;
24
+ margin-bottom: 0.5em;
24
25
  }
package/MenuItem/colors.css CHANGED
@@ -4,11 +4,11 @@ html {
4
4
 
5
5
  --theme-light-menuitem-foreground-color: hsl(0,0%,10%);
6
6
  --theme-light-menuitem-background-color: inherit;
7
- --theme-light-menuitem-foreground-color-selected: hsl(266,65%,45%);
7
+ --theme-light-menuitem-foreground-color-selected: var(--theme-light-accent-color-focused);
8
8
  --theme-light-menuitem-background-color-selected: hsla(266,100%,58%,0.2);
9
9
  --theme-light-menuitem-foreground-color-hover: hsl(0,0%,0%);
10
10
  --theme-light-menuitem-background-color-hover: hsl(0,0%,95%);
11
- --theme-light-menuitem-foreground-color-selected-hover: hsl(266,65%,40%);
11
+ --theme-light-menuitem-foreground-color-selected-hover: var(--theme-light-accent-color);
12
12
  --theme-light-menuitem-background-color-selected-hover: hsla(266,100%,58%,0.25);
13
13
  --theme-light-menuitem-foreground-color-disabled: hsl(0,0%,60%);
14
14
  --theme-light-menuitem-background-color-disabled: inherit;
@@ -17,11 +17,11 @@ html {
17
17
 
18
18
  --theme-dark-menuitem-foreground-color: hsl(0,0%,90%);
19
19
  --theme-dark-menuitem-background-color: inherit;
20
- --theme-dark-menuitem-foreground-color-selected: hsl(266,100%,63%);
20
+ --theme-dark-menuitem-foreground-color-selected: var(--theme-dark-accent-color);
21
21
  --theme-dark-menuitem-background-color-selected: hsla(266,100%,58%,0.2);
22
22
  --theme-dark-menuitem-foreground-color-hover: hsl(0,0%,100%);
23
23
  --theme-dark-menuitem-background-color-hover: hsl(0,0%,22%);
24
- --theme-dark-menuitem-foreground-color-selected-hover: hsl(266,100%,68%);
24
+ --theme-dark-menuitem-foreground-color-selected-hover: var(--theme-dark-accent-color-focused);
25
25
  --theme-dark-menuitem-background-color-selected-hover: hsla(266,100%,58%,0.25);
26
26
  --theme-dark-menuitem-foreground-color-disabled: hsl(0,0%,50%);
27
27
  --theme-dark-menuitem-background-color-disabled: inherit;
package/README.md CHANGED
@@ -65,7 +65,7 @@ const App = () => {
65
65
  m.mount(document.getElementById('app'), App)
66
66
  ```
67
67
 
68
- Transpile `index.js` into `dist/index.js` and `dist/index.css` files,
68
+ Transpile `index.jsx` into `dist/index.js` and `dist/index.css` files,
69
69
  for example, using `esbuild`:
70
70
 
71
71
  ```sh
@@ -77,16 +77,18 @@ Now open `index.html` in your favorite browser.
77
77
 
78
78
  ## Components
79
79
 
80
- - UI
81
- - Icon
82
- - Button
83
- - TextField
84
- - ContextMenu
85
- - MenuItem
86
- - Splitter
87
- - ThemeToggler
88
- - Form
89
- - Notice
80
+ - `UI`
81
+ - `Icon`
82
+ - `Button`
83
+ - `TextField`
84
+ - `ContextMenu`
85
+ - `MenuItem`
86
+ - `Splitter`
87
+ - `ThemeToggler`
88
+ - `Form`
89
+ - `Notice`
90
+ - `Tabs`
91
+ - `Tab`
90
92
 
91
93
  ## License
92
94
 
package/Tab/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { VNode, Component } from '../Component';
2
+
3
+ export declare function Tab(vnode: VNode): Component;
package/Tab/index.jsx ADDED
@@ -0,0 +1,13 @@
1
+ const Tab = () => {
2
+ return {
3
+ view({ children }) {
4
+ return (
5
+ <div class="tab">
6
+ {children}
7
+ </div>
8
+ )
9
+ }
10
+ }
11
+ }
12
+
13
+ export default Tab
package/Tabs/colors.css ADDED
@@ -0,0 +1,54 @@
1
+ html {
2
+
3
+ /* light theme */
4
+
5
+ --theme-light-tabs-background-color: hsl(0,0%,98%);
6
+ --theme-light-tabs-border-color: hsl(0,0%,85%);
7
+ --theme-light-tabs-active-background-color: hsl(0,0%,100%);
8
+ --theme-light-tabs-active-shadow-color: hsla(0,0%,0%,0.3);
9
+ --theme-light-tabs-active-text-color: var(--theme-light-accent-color-focused);
10
+
11
+ /* dark theme */
12
+
13
+ --theme-dark-tabs-background-color: hsl(0,0%,22%);
14
+ --theme-dark-tabs-border-color: hsl(0,0%,16%);
15
+ --theme-dark-tabs-active-background-color: hsl(0,0%,32%);
16
+ --theme-dark-tabs-active-shadow-color: hsla(0,0%,0%,0.4);
17
+ --theme-dark-tabs-active-text-color: var(--theme-dark-accent-color-focused);
18
+ }
19
+
20
+ .theme--light {
21
+ --tabs-background-color: var(--theme-light-tabs-background-color);
22
+ --tabs-border-color: var(--theme-light-tabs-border-color);
23
+ --tabs-active-background-color: var(--theme-light-tabs-active-background-color);
24
+ --tabs-active-shadow-color: var(--theme-light-tabs-active-shadow-color);
25
+ --tabs-active-text-color: var(--theme-light-tabs-active-text-color);
26
+ }
27
+
28
+ .theme--dark {
29
+ --tabs-background-color: var(--theme-dark-tabs-background-color);
30
+ --tabs-border-color: var(--theme-dark-tabs-border-color);
31
+ --tabs-active-background-color: var(--theme-dark-tabs-active-background-color);
32
+ --tabs-active-shadow-color: var(--theme-dark-tabs-active-shadow-color);
33
+ --tabs-active-text-color: var(--theme-dark-tabs-active-text-color);
34
+ }
35
+
36
+ @media (prefers-color-scheme: light) {
37
+ html {
38
+ --tabs-background-color: var(--theme-light-tabs-background-color);
39
+ --tabs-border-color: var(--theme-light-tabs-border-color);
40
+ --tabs-active-background-color: var(--theme-light-tabs-active-background-color);
41
+ --tabs-active-shadow-color: var(--theme-light-tabs-active-shadow-color);
42
+ --tabs-active-text-color: var(--theme-light-tabs-active-text-color);
43
+ }
44
+ }
45
+
46
+ @media (prefers-color-scheme: dark) {
47
+ html {
48
+ --tabs-background-color: var(--theme-dark-tabs-background-color);
49
+ --tabs-border-color: var(--theme-dark-tabs-border-color);
50
+ --tabs-active-background-color: var(--theme-dark-tabs-active-background-color);
51
+ --tabs-active-shadow-color: var(--theme-dark-tabs-active-shadow-color);
52
+ --tabs-active-text-color: var(--theme-dark-tabs-active-text-color);
53
+ }
54
+ }
package/Tabs/index.css ADDED
@@ -0,0 +1,36 @@
1
+ .tabs__list {
2
+ display: flex;
3
+ width: max-content;
4
+ flex-direction: row;
5
+ justify-content: center;
6
+ padding: 0.25em;
7
+ border-radius: 0.5em;
8
+ background-color: var(--tabs-border-color);
9
+ }
10
+
11
+ .tabs__switch {
12
+ display: flex;
13
+ width: max-content;
14
+ flex-direction: row;
15
+ justify-content: center;
16
+ border-radius: 0.4em;
17
+ user-select: none;
18
+ background-color: var(--tabs-background-color);
19
+ }
20
+
21
+ .tab__title {
22
+ display: flex;
23
+ flex-grow: 0;
24
+ flex-shrink: 0;
25
+ padding: 0.25em 1em;
26
+ cursor: pointer;
27
+ }
28
+
29
+ .tab__title.tab__title--active {
30
+ position: relative;
31
+ cursor: default;
32
+ border-radius: 0.25em;
33
+ background-color: var(--tabs-active-background-color);
34
+ box-shadow: 0 0 0.5em var(--tabs-active-shadow-color);
35
+ color: var(--tabs-active-text-color);
36
+ }
package/Tabs/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { VNode, Component } from '../Component';
2
+
3
+ export declare function Tabs(vnode: VNode): Component;
package/Tabs/index.jsx ADDED
@@ -0,0 +1,35 @@
1
+ import './index.css'
2
+ import './colors.css'
3
+ import classNames from 'classnames'
4
+
5
+ const Tabs = ({ attrs }) => {
6
+ let { active } = attrs
7
+ return {
8
+ view({ children }) {
9
+ const tabs = children.filter(({ tag: { name } }) => name === 'Tab')
10
+ .map(tab => {
11
+ const { key, attrs: { title }, children: content } = tab
12
+ return { key, title, content }
13
+ })
14
+ const activeIndex = tabs.findIndex(({ key }) => key === active || active === undefined)
15
+ const classes = 'tabs'
16
+ return (
17
+ <div class={classes}>
18
+ <div class="tabs__list">
19
+ <div class="tabs__switch">
20
+ {tabs.map(({ key, title }, i) => {
21
+ return <div class={classNames('tab__title', {
22
+ 'tab__title--active': i === activeIndex
23
+ })} onclick={() => { active = key }}>{title}</div>
24
+ })}
25
+ </div>
26
+ </div>
27
+ {activeIndex >= 0 &&
28
+ <div class="tabs__content">{tabs[activeIndex].content}</div>}
29
+ </div>
30
+ )
31
+ }
32
+ }
33
+ }
34
+
35
+ export default Tabs
package/UI/colors.css CHANGED
@@ -1,10 +1,6 @@
1
1
  html {
2
2
 
3
- --accent-color: hsl(266,100%,58%);
4
- --accent-color-focused: hsl(266,100%,63%);
5
- --accent-darken-color: hsl(266,65%,45%);
6
- --accent-darken-color-focused: hsl(266,70%,50%);
7
-
3
+
8
4
  --error-color: hsl(0,79%,50%);
9
5
  --error-color-focused: hsl(0,79%,57%);
10
6
  --warning-color: hsl(41,100%,50%);
@@ -14,6 +10,11 @@ html {
14
10
 
15
11
  /* light theme */
16
12
 
13
+ --theme-light-accent-color: hsl(266,100%,58%);
14
+ --theme-light-accent-color-focused: hsl(266,100%,66%);
15
+ --theme-light-accent-darken-color: hsl(266,65%,45%);
16
+ --theme-light-accent-darken-color-focused: hsl(266,70%,50%);
17
+
17
18
  --theme-light-color: hsl(0,0%,100%);
18
19
  --theme-light-foreground-color: hsl(0,0%,0%);
19
20
  --theme-light-background-color: hsl(0,0%,100%);
@@ -21,6 +22,11 @@ html {
21
22
 
22
23
  /* dark theme */
23
24
 
25
+ --theme-dark-accent-color: hsl(266,100%,75%);
26
+ --theme-dark-accent-color-focused: hsl(266,100%,82%);
27
+ --theme-dark-accent-darken-color: hsl(266,65%,45%);
28
+ --theme-dark-accent-darken-color-focused: hsl(266,70%,50%);
29
+
24
30
  --theme-dark-color: hsl(0,0%,0%);
25
31
  --theme-dark-foreground-color: hsl(0,0%,100%);
26
32
  --theme-dark-background-color: hsl(0,0%,12%);
@@ -61,6 +67,10 @@ a:hover, a:focus {
61
67
  }
62
68
 
63
69
  .theme--light {
70
+ --accent-color: var(--theme-light-accent-color);
71
+ --accent-color-focused: var(--theme-light-accent-color-focused);
72
+ --accent-darken-color: var(--theme-light-accent-darken-color);
73
+ --accent-darken-color-focused: var(--theme-light-accent-darken-color-focused);
64
74
  --theme-color: var(--theme-light-color);
65
75
  --foreground-color: var(--theme-light-foreground-color);
66
76
  --background-color: var(--theme-light-background-color);
@@ -68,6 +78,10 @@ a:hover, a:focus {
68
78
  }
69
79
 
70
80
  .theme--dark {
81
+ --accent-color: var(--theme-dark-accent-color);
82
+ --accent-color-focused: var(--theme-dark-accent-color-focused);
83
+ --accent-darken-color: var(--theme-dark-accent-darken-color);
84
+ --accent-darken-color-focused: var(--theme-dark-accent-darken-color-focused);
71
85
  --theme-color: var(--theme-dark-color);
72
86
  --foreground-color: var(--theme-dark-foreground-color);
73
87
  --background-color: var(--theme-dark-background-color);
@@ -76,6 +90,10 @@ a:hover, a:focus {
76
90
 
77
91
  @media (prefers-color-scheme: light) {
78
92
  html {
93
+ --accent-color: var(--theme-light-accent-color);
94
+ --accent-color-focused: var(--theme-light-accent-color-focused);
95
+ --accent-darken-color: var(--theme-light-accent-darken-color);
96
+ --accent-darken-color-focused: var(--theme-light-accent-darken-color-focused);
79
97
  --theme-color: var(--theme-light-color);
80
98
  --foreground-color: var(--theme-light-foreground-color);
81
99
  --background-color: var(--theme-light-background-color);
@@ -85,6 +103,10 @@ a:hover, a:focus {
85
103
 
86
104
  @media (prefers-color-scheme: dark) {
87
105
  html {
106
+ --accent-color: var(--theme-dark-accent-color);
107
+ --accent-color-focused: var(--theme-dark-accent-color-focused);
108
+ --accent-darken-color: var(--theme-dark-accent-darken-color);
109
+ --accent-darken-color-focused: var(--theme-dark-accent-darken-color-focused);
88
110
  --theme-color: var(--theme-dark-color);
89
111
  --foreground-color: var(--theme-dark-foreground-color);
90
112
  --background-color: var(--theme-dark-background-color);
package/index.d.ts CHANGED
@@ -8,4 +8,6 @@ export type { Notice } from './Notice/index.d.ts'
8
8
  export type { Splitter } from './Splitter/index.d.ts'
9
9
  export type { TextField } from './TextField/index.d.ts'
10
10
  export type { ThemeToggler } from './ThemeToggler/index.d.ts'
11
+ export type { Tab } from './Tab/index.d.ts'
12
+ export type { Tabs } from './Tabs/index.d.ts'
11
13
  export type { UI } from './UI/index.d.ts'
package/index.js CHANGED
@@ -9,3 +9,5 @@ export { default as Notice } from './Notice'
9
9
  export { default as Splitter } from './Splitter'
10
10
  export { default as TextField } from './TextField'
11
11
  export { default as ThemeToggler } from './ThemeToggler'
12
+ export { default as Tab } from './Tab'
13
+ export { default as Tabs } from './Tabs'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "march-ui",
3
- "version": "0.0.1",
3
+ "version": "0.0.3",
4
4
  "description": "Lightweight UI-kit for Mithril.js",
5
5
  "type": "module",
6
6
  "main": "index.js",