webcoreui 0.0.12 → 0.1.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 (46) hide show
  1. package/README.md +10 -5
  2. package/components/Accordion/accordion.module.scss +21 -27
  3. package/components/Alert/alert.module.scss +18 -21
  4. package/components/Avatar/avatar.module.scss +9 -6
  5. package/components/Badge/badge.module.scss +31 -34
  6. package/components/Button/Button.astro +0 -2
  7. package/components/Button/Button.svelte +0 -2
  8. package/components/Button/Button.tsx +0 -2
  9. package/components/Button/button.module.scss +32 -39
  10. package/components/Button/button.ts +0 -1
  11. package/components/Card/card.module.scss +20 -15
  12. package/components/Checkbox/checkbox.module.scss +27 -41
  13. package/components/Icon/Icon.astro +2 -2
  14. package/components/Input/input.module.scss +28 -36
  15. package/components/Menu/menu.module.scss +141 -144
  16. package/components/Progress/progress.module.scss +26 -22
  17. package/components/Radio/radio.module.scss +33 -41
  18. package/components/Rating/rating.module.scss +15 -8
  19. package/components/Spinner/spinner.module.scss +11 -2
  20. package/components/Switch/switch.module.scss +28 -30
  21. package/components/Table/table.module.scss +13 -17
  22. package/components/Tabs/Tabs.astro +0 -1
  23. package/components/Tabs/tabs.module.scss +40 -48
  24. package/components/ThemeSwitcher/themeswitcher.module.scss +28 -26
  25. package/components/Timeline/timeline.module.scss +24 -19
  26. package/components/TimelineItem/timelineitem.module.scss +15 -17
  27. package/components/Toast/toast.module.scss +10 -14
  28. package/components/Toast/toast.ts +6 -1
  29. package/icons.d.ts +11 -0
  30. package/icons.js +9 -0
  31. package/package.json +3 -1
  32. package/scss/config/color-palette.scss +23 -0
  33. package/scss/config/css-values.scss +44 -0
  34. package/scss/config/layout.scss +41 -0
  35. package/scss/config/mixins.scss +395 -9
  36. package/scss/config/typography.scss +66 -0
  37. package/scss/config.scss +6 -1
  38. package/scss/global/elements.scss +21 -1
  39. package/scss/global/scrollbar.scss +12 -9
  40. package/scss/global/theme.scss +2 -2
  41. package/scss/global/tooltip.scss +40 -35
  42. package/scss/global/utility.scss +4 -4
  43. package/scss/global.scss +0 -1
  44. package/scss/resets.scss +62 -9
  45. package/scss/setup.scss +12 -39
  46. package/utils/toast.ts +3 -2
package/README.md CHANGED
@@ -79,11 +79,11 @@ yarn add webcoreui
79
79
 
80
80
  ### Setup
81
81
 
82
- Setup default styles and fonts by calling the following in your global SCSS file:
82
+ Create an empty `webcore.config.scss` file at the root of your project to setup CSS configurations. Setup default styles and fonts by calling the following in your global SCSS file:
83
83
 
84
84
  ```scss
85
85
  @import 'webcoreui/styles';
86
- @include Setup((
86
+ @include setup((
87
87
  // Define paths for your fonts
88
88
  fontRegular: '/fonts/Inter-Regular.woff2',
89
89
  fontBold: '/fonts/Inter-Bold.woff2'
@@ -100,14 +100,13 @@ The `Setup` mixin can also accept the following options:
100
100
  |-----------|---------------|---------|
101
101
  | `includeResets` | `true` | Include reset styles. Set to `false` if you want to use your own CSS resets. |
102
102
  | `includeHelperClasses` | `true` | Adds global helper classes for CSS. All global helper classes are defined [here](https://github.com/Frontendland/webcoreui/tree/main/src/scss/global). |
103
- | `includeElementStyles` | `true` | Adds styles for native HTML elements, such as `code`, `pre`, or `ul`.
104
103
  | `includeTooltip` | `true` | Adds styles for using tooltips.
105
104
  | `includeScrollbarStyles` | `true` | Adds styles for scrollbars.
106
105
 
107
106
  Default component styles can be changed by overriding the following CSS variables:
108
107
 
109
- ```css
110
- body {
108
+ ```scss
109
+ html body {
111
110
  --w-avatar-border: var(--w-color-primary-70);
112
111
  --w-checkbox-color: var(--w-color-primary);
113
112
  --w-progress-color: var(--w-color-primary);
@@ -134,6 +133,12 @@ body {
134
133
  --w-timeline-counter: decimal;
135
134
  --w-tooltip-background: var(--w-color-primary);
136
135
  --w-tooltip-color: var(--w-color-primary-70);
136
+
137
+ // Override border-radius
138
+ --w-sm-radius: 2px;
139
+ --w-md-radius: 5px;
140
+ --w-lg-radius: 10px;
141
+ --w-xl-radius: 15px;
137
142
  }
138
143
  ```
139
144
 
package/components/Accordion/accordion.module.scss CHANGED
@@ -1,43 +1,37 @@
1
- @import '../../scss/config.scss';
1
+ @use '../../scss/config.scss' as *;
2
2
 
3
3
  .accordion {
4
- margin: 0;
5
- padding: 0;
4
+ @include spacing(0);
6
5
  list-style-type: none;
7
6
 
8
7
  li {
9
- border-bottom: 1px solid var(--w-color-primary-50);
10
- padding: 10px 0;
11
- font-size: 16px;
8
+ @include border(primary-50, bottom);
9
+ @include spacing(py-sm, px-none, m0);
10
+ @include typography(md);
12
11
 
13
12
  &:first-child {
14
13
  padding-top: 0;
15
14
  }
16
15
 
17
16
  &:last-child {
18
- border-bottom: 0;
17
+ @include border(bottom, 0);
19
18
  padding-bottom: 0;
20
19
  }
21
20
 
22
21
  .title {
23
- display: flex;
24
- justify-content: space-between;
25
- align-items: center;
26
- gap: 10px;
27
- width: 100%;
22
+ @include layout(flex, h-between, v-center, sm);
23
+ @include typography(md, primary, left);
24
+ @include size('w100%');
25
+ @include spacing(p0);
26
+ @include border(0);
27
+
28
28
  background: transparent;
29
- border: 0;
30
- color: var(--w-color-primary);
31
- font-size: 16px;
32
- padding: 0;
33
29
  cursor: pointer;
34
- text-align: left;
35
30
 
36
31
  svg {
37
- @include Transition(transform);
38
- color: var(--w-color-primary-20);
39
- width: 15px;
40
- height: 15px;
32
+ @include transition(transform);
33
+ @include size(15px);
34
+ @include typography(primary-20);
41
35
  pointer-events: none;
42
36
  }
43
37
 
@@ -50,22 +44,22 @@
50
44
  grid-template-rows: 1fr;
51
45
 
52
46
  .content {
53
- padding: 10px 0;
47
+ @include spacing(py-sm, px-none);
54
48
  }
55
49
  }
56
50
  }
57
51
  }
58
52
 
59
53
  .wrapper {
60
- @include Transition(grid-template-rows);
61
- display: grid;
54
+ @include transition(grid-template-rows);
55
+ @include layout(grid);
62
56
  grid-template-rows: 0fr;
63
57
  }
64
58
 
65
59
  .content {
66
- @include Transition();
67
- overflow: hidden;
68
- color: var(--w-color-primary-20);
60
+ @include transition();
61
+ @include visibility(hidden);
62
+ @include typography(primary-20);
69
63
  }
70
64
  }
71
65
  }
package/components/Alert/alert.module.scss CHANGED
@@ -1,54 +1,51 @@
1
- @import '../../scss/config.scss';
1
+ @use '../../scss/config.scss' as *;
2
2
 
3
3
  .w-alert {
4
- border: 1px solid var(--w-color-primary-50);
5
- border-radius: 5px;
6
- padding: 15px;
7
- display: flex;
4
+ @include border(primary-50);
5
+ @include border-radius(md);
6
+ @include spacing(p-md);
7
+ @include layout(flex);
8
8
 
9
9
  &.col {
10
- flex-direction: column;
10
+ @include layout(column);
11
11
  }
12
12
 
13
13
  &:not(.col) {
14
- gap: 10px;
14
+ @include layout(sm);
15
15
  }
16
16
 
17
17
  &.info {
18
- border: 1px solid var(--w-color-info);
19
- color: var(--w-color-info);
18
+ @include border(info);
19
+ @include typography(info);
20
20
  }
21
21
 
22
22
  &.success {
23
- border: 1px solid var(--w-color-success);
24
- color: var(--w-color-success);
23
+ @include border(success);
24
+ @include typography(success);
25
25
  }
26
26
 
27
27
  &.warning {
28
- border: 1px solid var(--w-color-warning);
29
- color: var(--w-color-warning);
28
+ @include border(warning);
29
+ @include typography(warning);
30
30
  }
31
31
 
32
32
  &.alert {
33
- border: 1px solid var(--w-color-alert);
34
- color: var(--w-color-alert);
33
+ @include border(alert);
34
+ @include typography(alert);
35
35
  }
36
36
 
37
37
  svg {
38
- width: 20px;
39
- height: 20px;
38
+ @include size(20px);
40
39
  min-width: 20px;
41
40
  margin-top: 1px;
42
41
  }
43
42
 
44
43
  .title {
44
+ @include spacing(mb-xs);
45
45
  display: block;
46
- margin-bottom: 5px;
47
46
  }
48
47
 
49
48
  .body {
50
- font-size: 16px;
51
- color: var(--w-color-primary-20);
52
- line-height: 1.5;
49
+ @include typography(primary-20, md, hmd);
53
50
  }
54
51
  }
package/components/Avatar/avatar.module.scss CHANGED
@@ -1,7 +1,11 @@
1
- @import '../../scss/config.scss';
1
+ @use '../../scss/config.scss' as *;
2
+
3
+ body {
4
+ --w-avatar-border: var(--w-color-primary-70);
5
+ }
2
6
 
3
7
  .avatar {
4
- border-radius: 100%;
8
+ @include border-radius(max);
5
9
 
6
10
  &:not(.borderless) {
7
11
  border: 3px solid var(--w-avatar-border);
@@ -9,14 +13,13 @@
9
13
  }
10
14
 
11
15
  .group {
12
- display: inline-flex;
13
- align-items: center;
16
+ @include layout(inline-flex, v-center);
14
17
 
15
18
  &.reverse {
16
- flex-direction: row-reverse;
19
+ @include layout(row-reverse);
17
20
 
18
21
  img {
19
- z-index: 1;
22
+ @include layer(fg);
20
23
  }
21
24
 
22
25
  img:not(:first-child) {
package/components/Badge/badge.module.scss CHANGED
@@ -1,89 +1,86 @@
1
- @import '../../scss/config.scss';
1
+ @use '../../scss/config.scss' as *;
2
2
 
3
3
  .badge {
4
- @include Transition();
5
- padding: 5px 10px;
6
- border-radius: 5px;
7
- display: inline-flex;
8
- align-items: center;
9
- gap: 5px;
10
- font-size: 12px;
11
- background: var(--w-color-primary);
12
- color: var(--w-color-primary-50);
13
- border: 0;
4
+ @include transition();
5
+ @include spacing(py-xs, px-sm);
6
+ @include border-radius(xs);
7
+ @include layout(inline-flex, v-center, xs);
8
+ @include typography(xs, primary-50);
9
+ @include border(0);
10
+ @include background(primary);
14
11
 
15
12
  &.hover {
16
13
  cursor: pointer;
17
14
 
18
15
  &:hover {
19
- background: var(--w-color-primary-20);
16
+ @include background(primary-20);
20
17
  }
21
18
 
22
19
  &.secondary:hover {
23
- background: var(--w-color-primary-40);
20
+ @include background(primary-40);
24
21
  }
25
22
 
26
23
  &.outline:hover {
27
- color: var(--w-color-primary);
28
- background: transparent;
24
+ @include typography(primary);
25
+ @include background(transparent);
29
26
  box-shadow: inset 0px 0px 0px 1px var(--w-color-primary);
30
27
  }
31
28
 
32
29
  &.flat:hover {
33
- background: var(--w-color-primary-40);
30
+ @include background(primary-40);
34
31
  }
35
32
 
36
33
  &.info:hover {
37
- background: var(--w-color-info-accent);
34
+ @include background(info-accent);
38
35
  }
39
36
 
40
37
  &.success:hover {
41
- background: var(--w-color-success-accent);
38
+ @include background(success-accent);
42
39
  }
43
40
 
44
41
  &.warning:hover {
45
- background: var(--w-color-warning-accent);
42
+ @include background(warning-accent);
46
43
  }
47
44
 
48
45
  &.alert:hover {
49
- background: var(--w-color-alert-accent);
46
+ @include background(alert-accent);
50
47
  }
51
48
  }
52
49
 
53
50
 
54
51
  &.secondary {
55
- background: var(--w-color-primary-50);
56
- color: var(--w-color-primary);
52
+ @include typography(primary);
53
+ @include background(primary-50);
57
54
  }
58
55
 
59
56
  &.outline {
60
- background: var(--w-color-primary-70);
61
- color: var(--w-color-primary-20);
57
+ @include typography(primary-20);
58
+ @include background(primary-70);
62
59
  box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-20);
63
60
  }
64
61
 
65
62
  &.flat {
66
- background: var(--w-color-primary-70);
67
- color: var(--w-color-primary);
63
+ @include typography(primary);
64
+ @include background(primary-70);
68
65
  }
69
66
 
70
67
  &.info {
71
- background: var(--w-color-info);
72
- color: var(--w-color-info-fg);
68
+ @include typography(info-fg);
69
+ @include background(info);
73
70
  }
74
71
 
75
72
  &.success {
76
- background: var(--w-color-success);
77
- color: var(--w-color-success-fg);
73
+ @include typography(success-fg);
74
+ @include background(success);
78
75
  }
79
76
 
80
77
  &.warning {
81
- background: var(--w-color-warning);
82
- color: var(--w-color-warning-fg);
78
+ @include typography(warning-fg);
79
+ @include background(warning);
83
80
  }
84
81
 
85
82
  &.alert {
86
- background: var(--w-color-alert);
87
- color: var(--w-color-alert-fg);
83
+ @include typography(alert-fg);
84
+ @include background(alert);
88
85
  }
89
86
  }
package/components/Button/Button.astro CHANGED
@@ -8,7 +8,6 @@ interface Props extends ButtonProps {}
8
8
 
9
9
  const {
10
10
  theme,
11
- bold,
12
11
  href,
13
12
  className,
14
13
  ...rest
@@ -16,7 +15,6 @@ const {
16
15
 
17
16
  const classes = classNames([
18
17
  styles.button,
19
- bold && styles.bold,
20
18
  theme && styles[theme],
21
19
  className
22
20
  ])
package/components/Button/Button.svelte CHANGED
@@ -5,14 +5,12 @@
5
5
  import { classNames } from '../../utils/classNames'
6
6
 
7
7
  export let theme: SvelteButtonProps['theme'] = null
8
- export let bold: SvelteButtonProps['bold'] = false
9
8
  export let href: SvelteButtonProps['href'] = ''
10
9
  export let className: SvelteButtonProps['className'] = ''
11
10
  export let onClick: SvelteButtonProps['onClick'] = () => {}
12
11
 
13
12
  const classes = classNames([
14
13
  styles.button,
15
- bold && styles.bold,
16
14
  theme && styles[theme],
17
15
  className
18
16
  ])
package/components/Button/Button.tsx CHANGED
@@ -6,7 +6,6 @@ import { classNames } from '../../utils/classNames'
6
6
 
7
7
  const Button = ({
8
8
  theme,
9
- bold,
10
9
  href,
11
10
  className,
12
11
  onClick,
@@ -15,7 +14,6 @@ const Button = ({
15
14
  }: ReactButtonProps) => {
16
15
  const classes = classNames([
17
16
  styles.button,
18
- bold && styles.bold,
19
17
  theme && styles[theme],
20
18
  className
21
19
  ])
package/components/Button/button.module.scss CHANGED
@@ -1,94 +1,87 @@
1
- @import '../../scss/config.scss';
1
+ @use '../../scss/config.scss' as *;
2
2
 
3
3
  .button {
4
- @include Transition();
5
- padding: 10px 15px;
6
- border-radius: 5px;
7
- text-decoration: none;
8
- display: inline-flex;
9
- align-items: center;
10
- gap: 5px;
11
- font-size: 16px;
4
+ @include layout(inline-flex, v-center, xs);
5
+ @include typography(md, primary-50, none);
6
+ @include spacing(py-sm, px-md);
7
+ @include border-radius(xs);
8
+ @include border(0);
9
+ @include transition();
10
+ @include background(primary);
11
+
12
12
  cursor: pointer;
13
- border: 0;
14
- background: var(--w-color-primary);
15
- color: var(--w-color-primary-50);
16
13
 
17
14
  &[disabled] {
18
15
  cursor: no-drop;
19
- background: var(--w-color-primary-20);
16
+ @include background(primary-20);
20
17
  }
21
18
 
22
19
  &:hover {
23
- background: var(--w-color-primary-20);
20
+ @include background(primary-20);
24
21
  }
25
22
 
26
23
  &.secondary {
27
- background: var(--w-color-primary-50);
28
- color: var(--w-color-primary);
24
+ @include typography(primary);
25
+ @include background(primary-50);
29
26
 
30
27
  &:hover {
31
- background: var(--w-color-primary-40);
28
+ @include background(primary-40);
32
29
  }
33
30
  }
34
31
 
35
32
  &.outline {
36
- background: transparent;
37
- color: var(--w-color-primary-20);
33
+ @include typography(primary-20);
34
+ @include background(transparent);
38
35
  box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-20);
39
36
 
40
37
  &:hover {
41
- color: var(--w-color-primary);
38
+ @include typography(primary);
42
39
  box-shadow: inset 0px 0px 0px 1px var(--w-color-primary);
43
40
  }
44
41
  }
45
42
 
46
43
  &.flat {
47
- background: transparent;
48
- color: var(--w-color-primary);
44
+ @include typography(primary);
45
+ @include background(transparent);
49
46
 
50
47
  &:hover {
51
- background: var(--w-color-primary-40);
48
+ @include background(primary-40);
52
49
  }
53
50
  }
54
51
 
55
52
  &.info {
56
- background: var(--w-color-info);
57
- color: var(--w-color-info-fg);
53
+ @include typography(info-fg);
54
+ @include background(info);
58
55
 
59
56
  &:hover {
60
- background: var(--w-color-info-accent);
57
+ @include background(info-accent);
61
58
  }
62
59
  }
63
60
 
64
61
  &.success {
65
- background: var(--w-color-success);
66
- color: var(--w-color-success-fg);
62
+ @include typography(success-fg);
63
+ @include background(success);
67
64
 
68
65
  &:hover {
69
- background: var(--w-color-success-accent);
66
+ @include background(success-accent);
70
67
  }
71
68
  }
72
69
 
73
70
  &.warning {
74
- background: var(--w-color-warning);
75
- color: var(--w-color-warning-fg);
71
+ @include typography(warning-fg);
72
+ @include background(warning);
76
73
 
77
74
  &:hover {
78
- background: var(--w-color-warning-accent);
75
+ @include background(warning-accent);
79
76
  }
80
77
  }
81
78
 
82
79
  &.alert {
83
- background: var(--w-color-alert);
84
- color: var(--w-color-alert-fg);
80
+ @include typography(alert-fg);
81
+ @include background(alert);
85
82
 
86
83
  &:hover {
87
- background: var(--w-color-alert-accent);
84
+ @include background(alert-accent);
88
85
  }
89
86
  }
90
-
91
- &.bold {
92
- font-family: Bold;
93
- }
94
87
  }
package/components/Button/button.ts CHANGED
@@ -7,7 +7,6 @@ export type ButtonProps = {
7
7
  | 'warning'
8
8
  | 'alert'
9
9
  | null
10
- bold?: boolean
11
10
  href?: string
12
11
  className?: string
13
12
  [key: string]: any
package/components/Card/card.module.scss CHANGED
@@ -1,33 +1,38 @@
1
+ @use '../../scss/config.scss' as *;
2
+
1
3
  .card {
2
- border: 1px solid var(--w-color-primary-50);
3
- border-radius: 5px;
4
- display: flex;
5
- flex-direction: column;
4
+ @include border(primary-50);
5
+ @include border-radius(md);
6
+ @include layout(flex, column);
6
7
 
7
8
  &.secondary {
8
- background: var(--w-color-primary-60);
9
+ @include background(primary-60);
9
10
 
10
11
  .title {
11
- background: var(--w-color-primary-70);
12
+ @include background(primary-70);
12
13
  }
13
14
  }
14
15
 
15
16
  .title {
16
- padding: 20px;
17
+ @include spacing(p-default);
18
+ @include border(primary-50, bottom);
19
+ @include typography(md);
17
20
  display: block;
18
- border-bottom: 1px solid var(--w-color-primary-50);
19
- font-size: 16px;
20
21
  }
21
22
 
22
23
  .body {
23
- padding: 20px;
24
- height: 100%;
25
- position: relative;
24
+ @include spacing(p-default);
25
+ @include size('h100%');
26
+ @include position(relative);
26
27
 
27
28
  &.compact {
28
- border: 20px solid var(--w-color-primary-60);
29
- background: var(--w-color-primary-70);
30
- padding: 40px;
29
+ @include border(20px, primary-60);
30
+ @include spacing(p-3xl);
31
+ @include background(primary-70);
31
32
  }
32
33
  }
33
34
  }
35
+
36
+ a.card {
37
+ @include typography(none);
38
+ }