@filip.mazev/blocks-core 1.0.15 → 1.0.16

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/lib/styles/_mixins.scss +17 -1
  3. package/src/lib/styles/_variables.scss +45 -0
  4. package/src/lib/styles/themes/_default-theme.scss +14 -14
  5. package/src/lib/styles/themes/_orange-company-theme.scss +24 -24
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@filip.mazev/blocks-core",
3
- "version": "1.0.15",
3
+ "version": "1.0.16",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  "./mixins": "./lib/styles/_mixins.scss",
package/src/lib/styles/_mixins.scss CHANGED
@@ -14,7 +14,23 @@
14
14
  }
15
15
 
16
16
  @mixin respond-between($min, $max) {
17
- @media (min-width: map.get($breakpoints, $min)) and (max-width: map.get($breakpoints, $max)) {
17
+ @media (min-width: map.get($breakpoints, $min)) and (max-width: map.get($breakpoints, $max)) {
18
18
  @content;
19
19
  }
20
+ }
21
+
22
+ @function spacing($key) {
23
+ @return map-get($spacing, $key);
24
+ }
25
+
26
+ @function radius($key) {
27
+ @return map-get($radiuses, $key);
28
+ }
29
+
30
+ @function shadow($key) {
31
+ @return map-get($shadows, $key);
32
+ }
33
+
34
+ @function z($key) {
35
+ @return map-get($z-index, $key);
20
36
  }
package/src/lib/styles/_variables.scss CHANGED
@@ -29,6 +29,51 @@ $hc-cyan: #00ffff;
29
29
  $hc-red: #ff0000;
30
30
  $hc-green: #00ff00;
31
31
 
32
+ $spacing: (
33
+ 0: 0,
34
+ 1: 0.25rem,
35
+ 2: 0.5rem,
36
+ 3: 0.75rem,
37
+ 4: 1rem,
38
+ 5: 1.25rem,
39
+ 6: 1.5rem,
40
+ 8: 2rem,
41
+ 10: 2.5rem,
42
+ 12: 3rem,
43
+ ) !default;
44
+
45
+ $radiuses: (
46
+ none: 0,
47
+ sm: 0.25rem,
48
+ md: 0.5rem,
49
+ lg: 0.75rem,
50
+ xl: 1rem,
51
+ 2xl: 1.5rem,
52
+ 3xl: 1.875rem,
53
+ pill: 9999px,
54
+ ) !default;
55
+
56
+ $shadows: (
57
+ sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
58
+ md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
59
+ lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
60
+ xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
61
+ modal: "0 8px 20px rgba(0, 0, 0, 0.12)",
62
+ toast: "0 4px 12px rgba(0, 0, 0, 0.15)",
63
+ ) !default;
64
+
65
+ $z-index: (
66
+ base: 1,
67
+ dropdown: 100,
68
+ sticky: 200,
69
+ fixed: 300,
70
+ modal-backdrop: 400,
71
+ modal: 410,
72
+ popover: 500,
73
+ tooltip: 600,
74
+ toast: 9999,
75
+ ) !default;
76
+
32
77
  $breakpoints: (
33
78
  xs: 360px,
34
79
 
package/src/lib/styles/themes/_default-theme.scss CHANGED
@@ -35,18 +35,18 @@ $default-light-theme-config: (
35
35
  'button-grayscale': map-get($gray-palette, 200),
36
36
 
37
37
  // Feedback
38
- 'toast-info-bg': #ebf5ff,
38
+ 'toast-info-bg': #f7fbfff8,
39
39
  'toast-info-border': #bcd3eb,
40
40
  'toast-info-accent': #1a5bc4,
41
- 'toast-error-bg': map-get($error-palette, 50),
41
+ 'toast-error-bg': #fffbfbf8,
42
42
  'toast-error-border': #f5cccc,
43
- 'toast-error-accent': map-get($error-palette, 500),
44
- 'toast-success-bg': #f0fdf4,
45
- 'toast-success-border': #a0e09af8,
43
+ 'toast-error-accent': #d33737,
44
+ 'toast-success-bg': #fbfffcf8,
45
+ 'toast-success-border': #a0e09a,
46
46
  'toast-success-accent': #0e873a,
47
- 'toast-warn-bg': map-get($warning-palette, 50),
47
+ 'toast-warn-bg': #fffdf7f8,
48
48
  'toast-warn-border': #f6e5c9,
49
- 'toast-warn-accent': map-get($warning-palette, 500),
49
+ 'toast-warn-accent': #ba7909,
50
50
 
51
51
  // Scrollbar & Sliders
52
52
  'scroll-bg': map-get($gray-palette, 100),
@@ -99,18 +99,18 @@ $default-dark-theme-config: (
99
99
  'button-grayscale': map-get($gray-palette, 700),
100
100
 
101
101
  // Feedback
102
- 'toast-info-bg': #0c151e,
102
+ 'toast-info-bg': #0c151ef8,
103
103
  'toast-info-border': #1e2f44,
104
104
  'toast-info-accent': #7cb7ff,
105
- 'toast-error-bg': #180c0c,
105
+ 'toast-error-bg': #1a0f0ff8,
106
106
  'toast-error-border': #3b1313,
107
- 'toast-error-accent': map-get($error-palette, 400),
108
- 'toast-success-bg': #0a150f,
107
+ 'toast-error-accent': #ff5757,
108
+ 'toast-success-bg': #0a150ff8,
109
109
  'toast-success-border': #133914,
110
- 'toast-success-accent': #4eee89,
111
- 'toast-warn-bg': #19100a,
110
+ 'toast-success-accent': #56e87f,
111
+ 'toast-warn-bg': #19100af8,
112
112
  'toast-warn-border': #311e12,
113
- 'toast-warn-accent': map-get($warning-palette, 500),
113
+ 'toast-warn-accent': #ffab1b,
114
114
 
115
115
  // Scrollbar & Sliders
116
116
  'scroll-bg': map-get($gray-palette, 800),
package/src/lib/styles/themes/_orange-company-theme.scss CHANGED
@@ -35,18 +35,18 @@ $orange-company-light-theme-config: (
35
35
  'button-grayscale': #d0d0d0b3,
36
36
 
37
37
  // Feedback
38
- 'toast-info-bg': #ecf4fbf8,
39
- 'toast-info-border': #c8dcf2f8,
40
- 'toast-info-accent': #2d82d7,
41
- 'toast-error-bg': #fadfdff8,
42
- 'toast-error-border': #f1b5b6f8,
43
- 'toast-error-accent': #d1282b,
44
- 'toast-success-bg': #e1fddaf8,
45
- 'toast-success-border': #b2f1acf8,
46
- 'toast-success-accent': #077f37,
47
- 'toast-warn-bg': #f6e7cbf9,
48
- 'toast-warn-border': #f0c7a8f8,
49
- 'toast-warn-accent': #8d660b,
38
+ 'toast-info-bg': #fbfdfff8,
39
+ 'toast-info-border': #d0ddea,
40
+ 'toast-info-accent': #1e69a7,
41
+ 'toast-error-bg': #fffcfcf8,
42
+ 'toast-error-border': #ead0d0,
43
+ 'toast-error-accent': #ba2e2e,
44
+ 'toast-success-bg': #fcfffcf8,
45
+ 'toast-success-border': #d1ead0,
46
+ 'toast-success-accent': #1e8f2d,
47
+ 'toast-warn-bg': #fffefbf8,
48
+ 'toast-warn-border': #eae3d0,
49
+ 'toast-warn-accent': #a96d18,
50
50
 
51
51
  // Scrollbar & Sliders
52
52
  'scroll-bg': #FFEDD4,
@@ -99,18 +99,18 @@ $orange-company-dark-theme-config: (
99
99
  'button-grayscale': #2e2e2eb1,
100
100
 
101
101
  // Feedback
102
- 'toast-info-bg': #080c11f5,
103
- 'toast-info-border': #112338f5,
104
- 'toast-info-accent': #80c6ffcd,
105
- 'toast-error-bg': #190b0bf9,
106
- 'toast-error-border': #391111f9,
107
- 'toast-error-accent': #dd6363,
108
- 'toast-success-bg': #0c130df8,
109
- 'toast-success-border': #183519f8,
110
- 'toast-success-accent': #52bc67,
111
- 'toast-warn-bg': #18130df5,
112
- 'toast-warn-border': #3a2211f5,
113
- 'toast-warn-accent': #e7a34b,
102
+ 'toast-info-bg': #0c0d0ef8,
103
+ 'toast-info-border': #17202b,
104
+ 'toast-info-accent': #5fb7c3,
105
+ 'toast-error-bg': #0e0c0cf8,
106
+ 'toast-error-border': #2b1717,
107
+ 'toast-error-accent': #f76d6d,
108
+ 'toast-success-bg': #0c0e0cf8,
109
+ 'toast-success-border': #172b18,
110
+ 'toast-success-accent': #5fc370,
111
+ 'toast-warn-bg': #0e0d0cf8,
112
+ 'toast-warn-border': #2b2317,
113
+ 'toast-warn-accent': #e4ad55,
114
114
 
115
115
  // Scroll & Sliders
116
116
  'scroll-bg': #712000,