ngx-bsl 0.0.2 → 0.0.4

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 (14) hide show
  1. package/README.md +63 -63
  2. package/fesm2022/ngx-bsl.mjs +1319 -16
  3. package/fesm2022/ngx-bsl.mjs.map +1 -1
  4. package/index.d.ts +302 -6
  5. package/package.json +3 -2
  6. package/{src/styles → styles}/_colors.scss +13 -13
  7. package/{src/styles → styles}/_fonts.scss +21 -21
  8. package/styles/_mixins.scss +15 -0
  9. package/styles/components/_overlay.scss +3 -0
  10. package/{src/styles → styles}/components/button.scss +53 -53
  11. package/{src/styles → styles}/components/input.scss +62 -62
  12. package/{src/styles → styles}/index.scss +10 -8
  13. package/{src/styles → styles}/themes/_dark-theme.scss +40 -30
  14. package/{src/styles → styles}/themes/_light-theme.scss +35 -30
package/{src/styles → styles}/index.scss RENAMED
@@ -1,8 +1,10 @@
1
- @forward 'colors';
2
- @forward 'fonts';
3
-
4
- @forward 'components/button';
5
- @forward 'components/input';
6
-
7
- @forward 'themes/light-theme';
8
- @forward 'themes/dark-theme';
1
+ @forward 'colors';
2
+ @forward 'fonts';
3
+ @forward 'mixins';
4
+
5
+ @forward 'components/button';
6
+ @forward 'components/input';
7
+ @forward 'components/overlay';
8
+
9
+ @forward 'themes/light-theme';
10
+ @forward 'themes/dark-theme';
package/{src/styles → styles}/themes/_dark-theme.scss RENAMED
@@ -1,30 +1,40 @@
1
- @mixin dark-theme {
2
- --bsl-backgroundColor: var(--bsl-color-neutral-950);
3
- --bsl-backgroundColor-muted: var(--bsl-color-neutral-900);
4
- --bsl-backgroundColor-emphasis: var(--bsl-color-neutral-800);
5
-
6
- --bsl-textColor: var(--bsl-color-neutral-200);
7
- --bsl-textColor-muted: var(--bsl-color-neutral-300);
8
-
9
- --bsl-borderColor: var(--bsl-color-neutral-800);
10
- --bsl-borderColor-muted: var(--bsl-color-neutral-700);
11
- --bsl-borderColor-emphasis: var(--bsl-color-neutral-600);
12
-
13
- --bsl-button-backgroundColor: var(--bsl-color-neutral-950);
14
- --bsl-button-backgroundColor-hover: var(--bsl-color-neutral-900);
15
- --bsl-button-backgroundColor-active: var(--bsl-color-neutral-800);
16
- --bsl-button-borderColor: var(--bsl-color-neutral-700);
17
- --bsl-button-textColor: var(--textColor);
18
-
19
- --bsl-input-backgroundColor: var(--bsl-color-neutral-900);
20
- --bsl-input-borderColor: var(--bsl-color-neutral-800);
21
- --bsl-input-textColor: var(--textColor);
22
- --bsl-input-textColor-placeholder: var(--bsl-color-neutral-400);
23
-
24
- --bsl-checkbox-backgroundColor: var(--bsl-color-neutral-900);
25
- --bsl-checkbox-borderColor: var(--bsl-color-neutral-800);
26
- --bsl-checkbox-borderColor-hover: var(--bsl-color-neutral-700);
27
- --bsl-checkbox-backgroundColor-checked: var(--bsl-color-neutral-700);
28
- --bsl-checkbox-backgroundColor-checked-hover: var(--bsl-color-neutral-600);
29
- --bsl-checkbox-iconColor: var(--bsl-color-neutral-200)
30
- }
1
+ @mixin dark-theme {
2
+ --bsl-backgroundColor: var(--bsl-color-neutral-950);
3
+ --bsl-backgroundColor-muted: var(--bsl-color-neutral-900);
4
+ --bsl-backgroundColor-emphasis: var(--bsl-color-neutral-800);
5
+
6
+ --bsl-textColor: var(--bsl-color-neutral-200);
7
+ --bsl-textColor-muted: var(--bsl-color-neutral-300);
8
+
9
+ --bsl-borderColor: var(--bsl-color-neutral-800);
10
+ --bsl-borderColor-muted: var(--bsl-color-neutral-700);
11
+ --bsl-borderColor-emphasis: var(--bsl-color-neutral-600);
12
+
13
+ --bsl-button-backgroundColor: var(--bsl-color-neutral-950);
14
+ --bsl-button-backgroundColor-hover: var(--bsl-color-neutral-900);
15
+ --bsl-button-backgroundColor-active: var(--bsl-color-neutral-800);
16
+ --bsl-button-borderColor: var(--bsl-color-neutral-700);
17
+ --bsl-button-textColor: var(--bsl-textColor);
18
+
19
+ --bsl-input-backgroundColor: var(--bsl-color-neutral-900);
20
+ --bsl-input-borderColor: var(--bsl-color-neutral-700);
21
+ --bsl-input-textColor: var(--bsl-textColor);
22
+ --bsl-input-textColor-placeholder: var(--bsl-color-neutral-400);
23
+
24
+ --bsl-checkbox-backgroundColor: var(--bsl-color-neutral-900);
25
+ --bsl-checkbox-borderColor: var(--bsl-color-neutral-800);
26
+ --bsl-checkbox-borderColor-hover: var(--bsl-color-neutral-700);
27
+ --bsl-checkbox-textColor: var(--bsl-textColor);
28
+
29
+ --bsl-list-box-backgroundColor: var(--bsl-color-neutral-950);
30
+ --bsl-list-box-backgroundColor-hover: var(--bsl-color-neutral-800);
31
+ --bsl-list-box-borderColor: var(--bsl-color-neutral-700);
32
+
33
+ --bsl-range-rail-backgroundColor: var(--bsl-color-neutral-800);
34
+ --bsl-range-tracker-backgroundColor: var(--bsl-color-neutral-600);
35
+ --bsl-range-thumb-backgroundColor: var(--bsl-color-neutral-200);
36
+
37
+ --bsl-tooltip-backgroundColor: var(--bsl-color-neutral-200);
38
+ --bsl-tooltip-textColor: var(--bsl-color-neutral-800);
39
+
40
+ }
package/{src/styles → styles}/themes/_light-theme.scss RENAMED
@@ -1,30 +1,35 @@
1
- @mixin light-theme {
2
- --bsl-backgroundColor: var(--bsl-color-neutral-50);
3
- --bsl-backgroundColor-muted: var(--bsl-color-neutral-100);
4
- --bsl-backgroundColor-emphasis: var(--bsl-color-neutral-200);
5
-
6
- --bsl-textColor: var(--bsl-color-neutral-900);
7
- --bsl-textColor-muted: var(--bsl-color-neutral-800);
8
-
9
- --bsl-borderColor: var(--bsl-color-neutral-200);
10
- --bsl-borderColor-muted: var(--bsl-color-neutral-300);
11
- --bsl-borderColor-emphasis: var(--bsl-color-neutral-400);
12
-
13
- --bsl-button-backgroundColor: var(--bsl-color-neutral-50);
14
- --bsl-button-backgroundColor-hover: var(--bsl-color-neutral-100);
15
- --bsl-button-backgroundColor-active: var(--bsl-color-neutral-200);
16
- --bsl-button-borderColor: var(--bsl-color-neutral-300);
17
- --bsl-button-textColor: var(--textColor);
18
-
19
- --bsl-input-backgroundColor: var(--bsl-color-neutral-100);
20
- --bsl-input-borderColor: var(--bsl-color-neutral-300);
21
- --bsl-input-textColor: var(--textColor);
22
- --bsl-input-textColor-placeholder: var(--bsl-color-neutral-400);
23
-
24
- --bsl-checkbox-backgroundColor: var(--bsl-color-neutral-100);
25
- --bsl-checkbox-borderColor: var(--bsl-color-neutral-300);
26
- --bsl-checkbox-borderColor-hover: var(--bsl-color-neutral-400);
27
- --bsl-checkbox-backgroundColor-checked: var(--bsl-color-neutral-950);
28
- --bsl-checkbox-backgroundColor-checked-hover: var(--bsl-color-neutral-900);
29
- --bsl-checkbox-iconColor: var(--bsl-color-neutral-200)
30
- }
1
+ @mixin light-theme {
2
+ --bsl-backgroundColor: var(--bsl-color-neutral-50);
3
+ --bsl-backgroundColor-muted: var(--bsl-color-neutral-100);
4
+ --bsl-backgroundColor-emphasis: var(--bsl-color-neutral-200);
5
+
6
+ --bsl-textColor: var(--bsl-color-neutral-900);
7
+ --bsl-textColor-muted: var(--bsl-color-neutral-800);
8
+
9
+ --bsl-borderColor: var(--bsl-color-neutral-200);
10
+ --bsl-borderColor-muted: var(--bsl-color-neutral-300);
11
+ --bsl-borderColor-emphasis: var(--bsl-color-neutral-400);
12
+
13
+ --bsl-button-backgroundColor: var(--bsl-color-neutral-50);
14
+ --bsl-button-backgroundColor-hover: var(--bsl-color-neutral-100);
15
+ --bsl-button-backgroundColor-active: var(--bsl-color-neutral-200);
16
+ --bsl-button-borderColor: var(--bsl-color-neutral-300);
17
+ --bsl-button-textColor: var(--bsl-textColor);
18
+
19
+ --bsl-input-backgroundColor: var(--bsl-color-neutral-100);
20
+ --bsl-input-borderColor: var(--bsl-color-neutral-300);
21
+ --bsl-input-textColor: var(--bsl-textColor);
22
+ --bsl-input-textColor-placeholder: var(--bsl-color-neutral-400);
23
+
24
+ --bsl-checkbox-backgroundColor: var(--bsl-color-neutral-100);
25
+ --bsl-checkbox-borderColor: var(--bsl-color-neutral-300);
26
+ --bsl-checkbox-borderColor-hover: var(--bsl-color-neutral-400);
27
+ --bsl-checkbox-textColor: var(--bsl-textColor);
28
+
29
+ --bsl-range-rail-backgroundColor: var(--bsl-color-neutral-200);
30
+ --bsl-range-tracker-backgroundColor: var(--bsl-color-neutral-400);
31
+ --bsl-range-thumb-backgroundColor: var(--bsl-color-neutral-800);
32
+
33
+ --bsl-tooltip-backgroundColor: var(--bsl-color-neutral-800);
34
+ --bsl-tooltip-textColor: var(--bsl-color-neutral-200);
35
+ }