ngx-bsl 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.
- package/package.json +7 -4
- package/styles/_colors.scss +13 -0
- package/styles/_fonts.scss +21 -0
- package/styles/components/button.scss +53 -0
- package/styles/components/input.scss +62 -0
- package/styles/index.scss +8 -0
- package/styles/themes/_dark-theme.scss +30 -0
- package/styles/themes/_light-theme.scss +30 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ngx-bsl",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": "^20.3.0",
|
|
6
6
|
"@angular/core": "^20.3.0"
|
|
@@ -9,9 +9,10 @@
|
|
|
9
9
|
"tslib": "^2.3.0"
|
|
10
10
|
},
|
|
11
11
|
"sideEffects": false,
|
|
12
|
-
"module": "fesm2022/ngx-bsl.mjs",
|
|
13
|
-
"typings": "index.d.ts",
|
|
14
12
|
"exports": {
|
|
13
|
+
"./styles": {
|
|
14
|
+
"sass": "./src/styles/index.scss"
|
|
15
|
+
},
|
|
15
16
|
"./package.json": {
|
|
16
17
|
"default": "./package.json"
|
|
17
18
|
},
|
|
@@ -19,5 +20,7 @@
|
|
|
19
20
|
"types": "./index.d.ts",
|
|
20
21
|
"default": "./fesm2022/ngx-bsl.mjs"
|
|
21
22
|
}
|
|
22
|
-
}
|
|
23
|
+
},
|
|
24
|
+
"module": "fesm2022/ngx-bsl.mjs",
|
|
25
|
+
"typings": "index.d.ts"
|
|
23
26
|
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--bsl-color-neutral-50: oklch(98.4% .003 247.858);
|
|
3
|
+
--bsl-color-neutral-100: oklch(96.8% .007 247.896);
|
|
4
|
+
--bsl-color-neutral-200: oklch(92.9% .013 255.508);
|
|
5
|
+
--bsl-color-neutral-300: oklch(86.9% .022 252.894);
|
|
6
|
+
--bsl-color-neutral-400: oklch(70.4% .04 256.788);
|
|
7
|
+
--bsl-color-neutral-500: oklch(55.4% .046 257.417);
|
|
8
|
+
--bsl-color-neutral-600: oklch(44.6% .043 257.281);
|
|
9
|
+
--bsl-color-neutral-700: oklch(37.2% .044 257.287);
|
|
10
|
+
--bsl-color-neutral-800: oklch(27.9% .041 260.031);
|
|
11
|
+
--bsl-color-neutral-900: oklch(20.8% .042 265.755);
|
|
12
|
+
--bsl-color-neutral-950: oklch(12.9% .042 264.695);
|
|
13
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--bsl-font-xs: 0.75rem/1rem sans-serif;
|
|
3
|
+
--bsl-font-sm: 0.875rem/1.25rem sans-serif;
|
|
4
|
+
--bsl-font-md: 1rem/1.5rem sans-serif;
|
|
5
|
+
--bsl-font-lg: 1.125rem/1.75rem sans-serif;
|
|
6
|
+
--bsl-font-xl: 1.25rem/1.75rem sans-serif;
|
|
7
|
+
--bsl-font-2xl: 1.5rem/2rem sans-serif;
|
|
8
|
+
--bsl-font-3xl: 1.75rem/2rem sans-serif;
|
|
9
|
+
--bsl-font-4xl: 1.875rem/2.25rem sans-serif;
|
|
10
|
+
--bsl-font-5xl: 2.25rem/2.5rem sans-serif;
|
|
11
|
+
|
|
12
|
+
--bsl-line-height-xs: 1rem;
|
|
13
|
+
--bsl-line-height-sm: 1.25rem;
|
|
14
|
+
--bsl-line-height-md: 1.5rem;
|
|
15
|
+
--bsl-line-height-lg: 1.75rem;
|
|
16
|
+
--bsl-line-height-xl: 1.75rem;
|
|
17
|
+
--bsl-line-height-2xl: 2rem;
|
|
18
|
+
--bsl-line-height-3xl: 2rem;
|
|
19
|
+
--bsl-line-height-4xl: 2.25rem;
|
|
20
|
+
--bsl-line-height-5xl: 2.5rem;
|
|
21
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
button {
|
|
2
|
+
padding: .5rem 1rem;
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
gap: .25rem;
|
|
7
|
+
background-color: var(--bsl-button-backgroundColor);
|
|
8
|
+
border: 1px solid var(--bsl-button-borderColor);
|
|
9
|
+
border-radius: 6px;
|
|
10
|
+
color: var(--bsl-textColor);
|
|
11
|
+
font: var(--bsl-font-sm);
|
|
12
|
+
font-weight: 500;
|
|
13
|
+
line-height: var(--bsl-line-height-sm);
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
transition: background-color 150ms cubic-bezier(.4, 0, .2, 1);
|
|
16
|
+
|
|
17
|
+
&:not(:disabled):hover {
|
|
18
|
+
background-color: var(--bsl-button-backgroundColor-hover);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&:not(:disabled):active {
|
|
22
|
+
background-color: var(--bsl-button-backgroundColor-active);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&:disabled {
|
|
26
|
+
opacity: .65;
|
|
27
|
+
cursor: not-allowed;
|
|
28
|
+
pointer-events: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&:focus-visible {
|
|
32
|
+
outline-offset: 2px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&.button-icon {
|
|
36
|
+
padding: .5rem;
|
|
37
|
+
|
|
38
|
+
span {
|
|
39
|
+
display: block;
|
|
40
|
+
min-width: 1.125rem; //equal to line-height
|
|
41
|
+
line-height: inherit;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&.invisible {
|
|
46
|
+
background-color: transparent;
|
|
47
|
+
border-color: transparent;
|
|
48
|
+
|
|
49
|
+
&:focus-visible {
|
|
50
|
+
outline-offset: 0;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
input[type="text"],
|
|
2
|
+
input[type="number"] {
|
|
3
|
+
width: 100%;
|
|
4
|
+
padding: .5rem .75rem;
|
|
5
|
+
background-color: var(--bsl-input-backgroundColor);
|
|
6
|
+
border: 1px solid var(--bsl-input-borderColor);
|
|
7
|
+
border-radius: 6px;
|
|
8
|
+
color: var(--bsl-textColor);
|
|
9
|
+
font: var(--bsl-font-sm);
|
|
10
|
+
line-height: var(--bsl-line-height-sm);
|
|
11
|
+
|
|
12
|
+
&:disabled {
|
|
13
|
+
opacity: .65;
|
|
14
|
+
cursor: not-allowed;
|
|
15
|
+
pointer-events: none;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&::placeholder {
|
|
19
|
+
color: var(--bsl-input-textColor-placeholder);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.input-with-icon {
|
|
24
|
+
position: relative;
|
|
25
|
+
|
|
26
|
+
input {
|
|
27
|
+
padding-left: 2rem;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
[class^="icon-"] {
|
|
31
|
+
position: absolute;
|
|
32
|
+
top: 50%;
|
|
33
|
+
left: .5rem;
|
|
34
|
+
transform: translateY(-50%);
|
|
35
|
+
font: var(--bsl-font-md);
|
|
36
|
+
color: var(--bsl-input-textColor);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.input-large {
|
|
41
|
+
input {
|
|
42
|
+
padding: .75rem 1.5rem .75rem 3rem;
|
|
43
|
+
font: var(--bsl-font-lg);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
[class^="icon-"] {
|
|
47
|
+
left: 1rem;
|
|
48
|
+
font: var(--bsl-font-lg);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* Remove arrows Chrome */
|
|
53
|
+
input::-webkit-outer-spin-button,
|
|
54
|
+
input::-webkit-inner-spin-button {
|
|
55
|
+
-webkit-appearance: none;
|
|
56
|
+
margin: 0;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Remove arrows Firefox */
|
|
60
|
+
input[type=number] {
|
|
61
|
+
-moz-appearance: textfield;
|
|
62
|
+
}
|
|
@@ -0,0 +1,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(--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
|
+
}
|
|
@@ -0,0 +1,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(--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
|
+
}
|