@konce-pt/styles 0.1.1 → 0.2.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.
- package/README.md +28 -6
- package/index.css +6 -4
- package/index.d.ts +1 -0
- package/package.json +11 -4
- package/src/index.scss +6 -4
package/README.md
CHANGED
|
@@ -22,13 +22,28 @@ npm i @konce-pt/styles @konce-pt/tokens
|
|
|
22
22
|
|
|
23
23
|
## Usage
|
|
24
24
|
|
|
25
|
+
Load **after** the tokens (it consumes the `--kpt-*` custom properties at runtime).
|
|
26
|
+
|
|
27
|
+
**Angular CLI** — `angular.json → styles[]` (tokens first, then this, then your `src/styles.scss`):
|
|
28
|
+
|
|
29
|
+
```jsonc
|
|
30
|
+
"styles": [
|
|
31
|
+
"node_modules/@konce-pt/tokens/dist/css/tokens.css",
|
|
32
|
+
"node_modules/@konce-pt/tokens/dist/css/tokens.dark.css",
|
|
33
|
+
"node_modules/@konce-pt/styles/index.css",
|
|
34
|
+
"src/styles.scss"
|
|
35
|
+
]
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
**Vite / webpack** — import directly (after the tokens CSS):
|
|
39
|
+
|
|
25
40
|
```ts
|
|
26
41
|
import '@konce-pt/tokens/css';
|
|
27
42
|
import '@konce-pt/tokens/css/dark';
|
|
28
43
|
import '@konce-pt/styles';
|
|
29
44
|
```
|
|
30
45
|
|
|
31
|
-
Or
|
|
46
|
+
Or compose the SCSS source into your own build:
|
|
32
47
|
|
|
33
48
|
```scss
|
|
34
49
|
@use '@konce-pt/styles/scss';
|
|
@@ -42,12 +57,19 @@ Or import the SCSS source to compose with your own build:
|
|
|
42
57
|
|
|
43
58
|
## 🇵🇱 Wersja polska
|
|
44
59
|
|
|
45
|
-
Bazowy arkusz stylów [Koncept UI](https://www.npmjs.com/package/@konce-pt/angular): nowoczesny reset, typografia i warstwy CSS **`@layer`** (`kpt.reset, kpt.base, kpt.components, kpt.utilities`) — łatwe nadpisywanie bez wojen specyficzności. Bazuje na [`@konce-pt/tokens`](https://www.npmjs.com/package/@konce-pt/tokens).
|
|
60
|
+
Bazowy arkusz stylów [Koncept UI](https://www.npmjs.com/package/@konce-pt/angular): nowoczesny reset, typografia i warstwy CSS **`@layer`** (`kpt.reset, kpt.base, kpt.components, kpt.utilities`) — łatwe nadpisywanie bez wojen specyficzności. Bazuje na [`@konce-pt/tokens`](https://www.npmjs.com/package/@konce-pt/tokens); ładuj **po** tokenach.
|
|
46
61
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
62
|
+
**Angular CLI** — `angular.json → styles[]` (najpierw tokeny, potem ten plik, na końcu Twój `src/styles.scss`):
|
|
63
|
+
|
|
64
|
+
```jsonc
|
|
65
|
+
"styles": [
|
|
66
|
+
"node_modules/@konce-pt/tokens/dist/css/tokens.css",
|
|
67
|
+
"node_modules/@konce-pt/tokens/dist/css/tokens.dark.css",
|
|
68
|
+
"node_modules/@konce-pt/styles/index.css",
|
|
69
|
+
"src/styles.scss"
|
|
70
|
+
]
|
|
51
71
|
```
|
|
52
72
|
|
|
73
|
+
**Vite/webpack** — `import '@konce-pt/tokens/css'; import '@konce-pt/tokens/css/dark'; import '@konce-pt/styles';`
|
|
74
|
+
|
|
53
75
|
Licencja: [MIT](./LICENSE) © konce.pt
|
package/index.css
CHANGED
|
@@ -5,10 +5,12 @@
|
|
|
5
5
|
* Komponenty (@konce-pt/angular) deklarują style w warstwie `kpt.components`,
|
|
6
6
|
* dzięki czemu aplikacja łatwo je nadpisuje bez wojny specyficzności.
|
|
7
7
|
*
|
|
8
|
-
* Wymaga wcześniejszego
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
8
|
+
* Wymaga wcześniejszego załadowania tokenów (custom properties --kpt-*).
|
|
9
|
+
* Angular CLI — angular.json → styles[] (kolejność: tokeny, potem ten plik):
|
|
10
|
+
* node_modules/@konce-pt/tokens/dist/css/tokens.css
|
|
11
|
+
* node_modules/@konce-pt/tokens/dist/css/tokens.dark.css
|
|
12
|
+
* node_modules/@konce-pt/styles/index.css
|
|
13
|
+
* Vite/webpack — import '@konce-pt/tokens/css'; import '@konce-pt/tokens/css/dark'; import '@konce-pt/styles';
|
|
12
14
|
*/
|
|
13
15
|
@layer kpt.reset, kpt.base, kpt.components, kpt.utilities;
|
|
14
16
|
@layer kpt.reset {
|
package/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@konce-pt/styles",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Base CSS for Koncept UI — reset, cascade @layer ordering and neutral light/dark theme (SCSS source).",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "konce.pt",
|
|
@@ -26,16 +26,23 @@
|
|
|
26
26
|
"*.css"
|
|
27
27
|
],
|
|
28
28
|
"exports": {
|
|
29
|
-
".":
|
|
30
|
-
|
|
29
|
+
".": {
|
|
30
|
+
"types": "./index.d.ts",
|
|
31
|
+
"default": "./index.css"
|
|
32
|
+
},
|
|
33
|
+
"./index.css": {
|
|
34
|
+
"types": "./index.d.ts",
|
|
35
|
+
"default": "./index.css"
|
|
36
|
+
},
|
|
31
37
|
"./scss": "./src/index.scss"
|
|
32
38
|
},
|
|
33
39
|
"files": [
|
|
34
40
|
"index.css",
|
|
41
|
+
"index.d.ts",
|
|
35
42
|
"src"
|
|
36
43
|
],
|
|
37
44
|
"peerDependencies": {
|
|
38
|
-
"@konce-pt/tokens": "0.
|
|
45
|
+
"@konce-pt/tokens": "0.2.0"
|
|
39
46
|
},
|
|
40
47
|
"devDependencies": {
|
|
41
48
|
"sass": "^1.77.0"
|
package/src/index.scss
CHANGED
|
@@ -4,10 +4,12 @@
|
|
|
4
4
|
* Komponenty (@konce-pt/angular) deklarują style w warstwie `kpt.components`,
|
|
5
5
|
* dzięki czemu aplikacja łatwo je nadpisuje bez wojny specyficzności.
|
|
6
6
|
*
|
|
7
|
-
* Wymaga wcześniejszego
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
7
|
+
* Wymaga wcześniejszego załadowania tokenów (custom properties --kpt-*).
|
|
8
|
+
* Angular CLI — angular.json → styles[] (kolejność: tokeny, potem ten plik):
|
|
9
|
+
* node_modules/@konce-pt/tokens/dist/css/tokens.css
|
|
10
|
+
* node_modules/@konce-pt/tokens/dist/css/tokens.dark.css
|
|
11
|
+
* node_modules/@konce-pt/styles/index.css
|
|
12
|
+
* Vite/webpack — import '@konce-pt/tokens/css'; import '@konce-pt/tokens/css/dark'; import '@konce-pt/styles';
|
|
11
13
|
*/
|
|
12
14
|
@layer kpt.reset, kpt.base, kpt.components, kpt.utilities;
|
|
13
15
|
|