@filip.mazev/common-parts 0.0.7 → 0.0.9

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 (7) hide show
  1. package/package.json +4 -1
  2. package/src/lib/styles/_index.scss +3 -1
  3. package/src/lib/styles/_mixins.scss +1 -14
  4. package/src/lib/styles/_theme-provider.scss +9 -10
  5. package/src/lib/styles/_variables.scss +11 -19
  6. package/src/lib/styles/themes/_default-theme.scss +113 -0
  7. package/src/lib/styles/themes/_orange-company-theme.scss +113 -0
package/package.json CHANGED
@@ -1,10 +1,13 @@
1
1
  {
2
2
  "name": "@filip.mazev/common-parts",
3
- "version": "0.0.7",
3
+ "version": "0.0.9",
4
4
  "exports": {
5
5
  "./mixins": "./lib/styles/_mixins.scss",
6
6
  "./variables": "./lib/styles/_variables.scss",
7
7
  "./theme-provider": "./lib/styles/_theme-provider.scss",
8
+ "./default-theme": "./lib/styles/themes/_default-theme.scss",
9
+ "./orange-company-theme": "./lib/styles/themes/_orange-company-theme.scss",
10
+ "./index": "./lib/styles/_index.scss",
8
11
  "./package.json": {
9
12
  "default": "./package.json"
10
13
  },
package/src/lib/styles/_index.scss CHANGED
@@ -1,3 +1,5 @@
1
1
  @forward 'mixins';
2
2
  @forward 'variables';
3
- @forward 'theme-provider';
3
+ @forward 'theme-provider';
4
+ @forward 'themes/default-theme';
5
+ @forward 'themes/orange-company-theme';
package/src/lib/styles/_mixins.scss CHANGED
@@ -1,18 +1,5 @@
1
1
  @use "sass:map";
2
-
3
- $breakpoints: (
4
- xs: 360px,
5
-
6
- sm: 640px,
7
- md: 768px,
8
-
9
- lg: 1024px,
10
- xl: 1280px,
11
-
12
- 2xl: 1536px,
13
- 3xl: 1920px,
14
- 4xl: 2560px
15
- ) !default;
2
+ @use 'variables';
16
3
 
17
4
  @mixin respond-up($size) {
18
5
  @media (min-width: map.get($breakpoints, $size)) {
package/src/lib/styles/_theme-provider.scss CHANGED
@@ -1,12 +1,11 @@
1
+ @use 'sass:map';
2
+
1
3
  @mixin core-theme($config) {
2
- --fm-bg-canvas: #{map-get($config, 'canvas')};
3
- --fm-bg-surface: #{map-get($config, 'surface')};
4
- --fm-bg-element: #{map-get($config, 'element')};
5
- --fm-text-main: #{map-get($config, 'text')};
6
- --fm-border: #{map-get($config, 'border')};
7
- --fm-status-warning: #{map-get($config, 'status-warn')};
8
- --fm-status-error: #{map-get($config, 'status-error')};
9
- --fm-bg-error-subtle: #{map-get($config, 'error-subtle')};
10
-
11
- --fm-contrast-main: #{if(map-get($config, 'surface') == #ffffff, #000, #fff)};
4
+ @each $key, $value in $config {
5
+ --fm-#{$key}: #{$value};
6
+ }
7
+
8
+ @if map.has-key($config, 'surface') {
9
+ --fm-bg-surface: #{map.get($config, 'surface')};
10
+ }
12
11
  }
package/src/lib/styles/_variables.scss CHANGED
@@ -25,24 +25,16 @@ $error-palette: (
25
25
  900: #7f1d1d
26
26
  ) !default;
27
27
 
28
- $light-theme-config: (
29
- 'canvas': map-get($gray-palette, 50),
30
- 'surface': #ffffff,
31
- 'element': map-get($gray-palette, 100),
32
- 'text': map-get($gray-palette, 900),
33
- 'border': map-get($gray-palette, 200),
34
- 'status-warn': map-get($warning-palette, 500),
35
- 'status-error': map-get($error-palette, 500),
36
- 'error-subtle': map-get($error-palette, 50)
37
- ) !default;
28
+ $breakpoints: (
29
+ xs: 360px,
30
+
31
+ sm: 640px,
32
+ md: 768px,
33
+
34
+ lg: 1024px,
35
+ xl: 1280px,
38
36
 
39
- $dark-theme-config: (
40
- 'canvas': map-get($gray-palette, 900),
41
- 'surface': #1e1e1e,
42
- 'element': map-get($gray-palette, 800),
43
- 'text': map-get($gray-palette, 50),
44
- 'border': map-get($gray-palette, 700),
45
- 'status-warn': map-get($warning-palette, 400),
46
- 'status-error': map-get($error-palette, 400),
47
- 'error-subtle': rgba(239, 68, 68, 0.15)
37
+ 2xl: 1536px,
38
+ 3xl: 1920px,
39
+ 4xl: 2560px
48
40
  ) !default;
package/src/lib/styles/themes/_default-theme.scss ADDED
@@ -0,0 +1,113 @@
1
+ @use '../variables';
2
+
3
+ $default-light-theme-config: (
4
+ // General
5
+ 'primary': map-get($gray-palette, 800),
6
+ 'secondary': map-get($gray-palette, 100),
7
+ 'alt': map-get($gray-palette, 900),
8
+ 'accent': map-get($warning-palette, 500),
9
+ 'accent-alt': map-get($warning-palette, 900),
10
+ 'accent-tertiary': map-get($warning-palette, A400),
11
+
12
+ // Text
13
+ 'text-primary': map-get($gray-palette, 900),
14
+ 'text-secondary': map-get($gray-palette, 600),
15
+ 'text-tertiary': map-get($gray-palette, 500),
16
+ 'text-accent': map-get($warning-palette, 900),
17
+ 'text-accent-alt': map-get($gray-palette, 50),
18
+ 'text-grayscale': map-get($gray-palette, 900),
19
+ 'menu-item-text': map-get($gray-palette, 800),
20
+ 'text-warn': map-get($warning-palette, 900),
21
+ 'text-confirm': #166534,
22
+
23
+ // UI Elements
24
+ 'bg-menu-item-hover': map-get($gray-palette, 200),
25
+ 'border': map-get($gray-palette, 200),
26
+ 'border-grayscale-light': map-get($gray-palette, 100),
27
+ 'warn': map-get($warning-palette, 500),
28
+ 'error': map-get($error-palette, 500),
29
+ 'info': #3b82f6,
30
+
31
+ // Buttons
32
+ 'button-primary': map-get($gray-palette, 800),
33
+ 'button-confirm': #25af58,
34
+ 'button-warn': map-get($error-palette, 500),
35
+ 'button-grayscale': map-get($gray-palette, 200),
36
+
37
+ // Feedback
38
+ 'snackbar-error': map-get($error-palette, 50),
39
+ 'snackbar-success': #f0fdf4,
40
+ 'snackbar-warn': map-get($warning-palette, 50),
41
+
42
+ // Scrollbar & Sliders
43
+ 'scroll-bg': map-get($gray-palette, 100),
44
+ 'scroll-thumb': map-get($gray-palette, 400),
45
+ 'scroll-thumb-highlighted': map-get($gray-palette, 600),
46
+ 'slider-track': map-get($gray-palette, 200),
47
+ 'slider-thumb': map-get($gray-palette, 800),
48
+ 'slider-thumb-hover': map-get($gray-palette, 900),
49
+
50
+ 'canvas': map-get($gray-palette, 50),
51
+ 'surface': #ffffff,
52
+ 'element': map-get($gray-palette, 100),
53
+ 'text': map-get($gray-palette, 900),
54
+ 'status-warn': map-get($warning-palette, 500),
55
+ 'status-error': map-get($error-palette, 500),
56
+ 'error-subtle': map-get($error-palette, 50)
57
+ ) !default;
58
+
59
+ $default-dark-theme-config: (
60
+ // General
61
+ 'primary': map-get($gray-palette, 50),
62
+ 'secondary': map-get($gray-palette, 800),
63
+ 'alt': map-get($gray-palette, 50),
64
+ 'accent': map-get($warning-palette, 500),
65
+ 'accent-alt': map-get($warning-palette, A400),
66
+ 'accent-tertiary': map-get($warning-palette, 50),
67
+
68
+ // Text
69
+ 'text-primary': map-get($gray-palette, 50),
70
+ 'text-secondary': map-get($gray-palette, 400),
71
+ 'text-tertiary': map-get($gray-palette, 500),
72
+ 'text-accent': map-get($warning-palette, 500),
73
+ 'text-accent-alt': map-get($gray-palette, 900),
74
+ 'text-grayscale': map-get($gray-palette, 50),
75
+ 'menu-item-text': map-get($gray-palette, 200),
76
+ 'text-warn': map-get($warning-palette, 500),
77
+ 'text-confirm': #4ade80,
78
+
79
+ // UI Elements
80
+ 'bg-menu-item-hover': map-get($gray-palette, 700),
81
+ 'border': map-get($gray-palette, 700),
82
+ 'border-grayscale-light': map-get($gray-palette, 800),
83
+ 'warn': map-get($warning-palette, 500),
84
+ 'error': map-get($error-palette, 400),
85
+ 'info': #60a5fa,
86
+
87
+ // Buttons
88
+ 'button-primary': map-get($gray-palette, 50),
89
+ 'button-confirm': #16a34a,
90
+ 'button-warn': map-get($error-palette, 600),
91
+ 'button-grayscale': map-get($gray-palette, 700),
92
+
93
+ // Feedback
94
+ 'snackbar-error': #450a0a,
95
+ 'snackbar-success': #052e16,
96
+ 'snackbar-warn': #451a03,
97
+
98
+ // Scrollbar & Sliders
99
+ 'scroll-bg': map-get($gray-palette, 800),
100
+ 'scroll-thumb': map-get($gray-palette, 600),
101
+ 'scroll-thumb-highlighted': map-get($gray-palette, 400),
102
+ 'slider-track': map-get($gray-palette, 700),
103
+ 'slider-thumb': map-get($gray-palette, 50),
104
+ 'slider-thumb-hover': #ffffff,
105
+
106
+ 'canvas': map-get($gray-palette, 900),
107
+ 'surface': #1e1e1e,
108
+ 'element': map-get($gray-palette, 800),
109
+ 'text': map-get($gray-palette, 50),
110
+ 'status-warn': map-get($warning-palette, 400),
111
+ 'status-error': map-get($error-palette, 400),
112
+ 'error-subtle': rgba(239, 68, 68, 0.15)
113
+ ) !default;
package/src/lib/styles/themes/_orange-company-theme.scss ADDED
@@ -0,0 +1,113 @@
1
+ @use '../variables';
2
+
3
+ $orange-company-light-theme-config: (
4
+ // General
5
+ 'primary': #FFF7ED,
6
+ 'secondary': #f7f7f7,
7
+ 'alt': #0c0c0c,
8
+ 'accent': #FFB86A,
9
+ 'accent-alt': #FF6900,
10
+ 'accent-tertiary': #CA3500,
11
+
12
+ // Text
13
+ 'text-primary': #484848,
14
+ 'text-secondary': #9F2D00,
15
+ 'text-tertiary': #CA3500,
16
+ 'text-accent': #FF8904,
17
+ 'text-accent-alt': #f3f3f3,
18
+ 'text-grayscale': #111111,
19
+ 'menu-item-text': #151515,
20
+ 'text-warn': #FB2C36,
21
+ 'text-confirm': #00C950,
22
+
23
+ // UI Elements
24
+ 'bg-menu-item-hover': #FFD6A7,
25
+ 'border': #d5d5d5,
26
+ 'border-grayscale-light': #e1e1e1,
27
+ 'warn': #ffcc54,
28
+ 'error': #FF4C4F,
29
+ 'info': #4da6ff,
30
+
31
+ // Buttons
32
+ 'button-primary': #FF690099,
33
+ 'button-confirm': #00C95070,
34
+ 'button-warn': #FB2C3660,
35
+ 'button-grayscale': #d0d0d0b3,
36
+
37
+ // Feedback
38
+ 'snackbar-error': #ffa9aa,
39
+ 'snackbar-success': #a2ff99,
40
+ 'snackbar-warn': #ffdc9b,
41
+
42
+ // Scrollbar & Sliders
43
+ 'scroll-bg': #FFEDD4,
44
+ 'scroll-thumb': linear-gradient(278deg, #FFB86A -10.44%, #FF8904 100%),
45
+ 'scroll-thumb-highlighted': linear-gradient(278deg, #FF8904 -10.44%, #CA3500 100%),
46
+ 'slider-track': #f4f4f4,
47
+ 'slider-thumb': #FF6900,
48
+ 'slider-thumb-hover': #FF8900,
49
+
50
+ 'canvas': #ffffff,
51
+ 'surface': #ffffff,
52
+ 'element': #f7f7f7,
53
+ 'text': #484848,
54
+ 'status-warn': map-get($warning-palette, 500),
55
+ 'status-error': map-get($error-palette, 500),
56
+ 'error-subtle': map-get($error-palette, 50)
57
+ ) !default;
58
+
59
+ $orange-company-dark-theme-config: (
60
+ // General
61
+ 'primary': #231812,
62
+ 'secondary': #1a1a1a,
63
+ 'alt': #FFF7ED,
64
+ 'accent': #CA3500,
65
+ 'accent-alt': #FF6900,
66
+ 'accent-tertiary': #FF8904,
67
+
68
+ // Text
69
+ 'text-primary': #ffffff,
70
+ 'text-secondary': #FFD6A7,
71
+ 'text-tertiary': #FFB86A,
72
+ 'text-accent': #FF8904,
73
+ 'text-accent-alt': #131313,
74
+ 'text-grayscale': #e1e1e1,
75
+ 'menu-item-text': #e7e7e7,
76
+ 'text-warn': #FB2C36,
77
+ 'text-confirm': #00C950,
78
+
79
+ // UI Elements
80
+ 'bg-menu-item-hover': #CA3500,
81
+ 'border': #282828,
82
+ 'border-grayscale-light': #3b3b3b39,
83
+ 'border': #d5d5d5,
84
+ 'warn': #ffcc54,
85
+ 'error': #FF4C4F,
86
+ 'info': #4da6ff,
87
+
88
+ // Buttons
89
+ 'button-primary': #FF690099,
90
+ 'button-confirm': #00C95070,
91
+ 'button-warn': #FB2C3660,
92
+ 'button-grayscale': #2e2e2eb1,
93
+
94
+ // Feedback
95
+ 'snackbar-error': #8e1416,
96
+ 'snackbar-success': #2e7d32,
97
+ 'snackbar-warn': #b27a1c,
98
+
99
+ // Scroll & Sliders
100
+ 'scroll-bg': #712000,
101
+ 'scroll-thumb': linear-gradient(278deg, #CA3500 -10.44%, #FF6900 100%),
102
+ 'scroll-thumb-highlighted': linear-gradient(278deg, #FF6900 -10.44%, #FF8904 100%),
103
+ 'slider-track': #333333,
104
+ 'slider-thumb': #FF8904,
105
+ 'slider-thumb-hover': #FF6900,
106
+
107
+ 'canvas': #000000,
108
+ 'surface': #0d0d0d,
109
+ 'text': #ffffff,
110
+ 'status-warn': map-get($warning-palette, 400),
111
+ 'status-error': map-get($error-palette, 400),
112
+ 'error-subtle': rgba(239, 68, 68, 0.15)
113
+ ) !default;