@konce-pt/styles 0.11.2 → 0.14.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 +11 -11
- package/components.css +2004 -263
- package/index.css +27 -3
- package/package.json +4 -3
- package/src/index.scss +36 -12
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
<div align="center">
|
|
2
2
|
|
|
3
|
-
<img src="https://ui.konce.pt/images/koncept_ui_lib.png" alt="Koncept UI
|
|
3
|
+
<img src="https://ui.konce.pt/images/koncept_ui_lib.png" alt="Koncept UI - Angular component library" width="100%" />
|
|
4
4
|
|
|
5
|
-
# Koncept UI
|
|
5
|
+
# Koncept UI - Base Styles
|
|
6
6
|
|
|
7
|
-
**Base CSS for Koncept UI
|
|
7
|
+
**Base CSS for Koncept UI - reset, cascade layers and neutral light/dark theme.**
|
|
8
8
|
|
|
9
9
|
[](https://www.npmjs.com/package/@konce-pt/styles)
|
|
10
10
|
[](https://bundlephobia.com/package/@konce-pt/styles)
|
|
@@ -26,7 +26,7 @@ npm i @konce-pt/styles @konce-pt/tokens
|
|
|
26
26
|
|
|
27
27
|
Load **after** the tokens (it consumes the `--kpt-*` custom properties at runtime).
|
|
28
28
|
|
|
29
|
-
**Angular CLI**
|
|
29
|
+
**Angular CLI** - `angular.json -> styles[]` (tokens first, then this, then your `src/styles.scss`):
|
|
30
30
|
|
|
31
31
|
```jsonc
|
|
32
32
|
"styles": [
|
|
@@ -37,7 +37,7 @@ Load **after** the tokens (it consumes the `--kpt-*` custom properties at runtim
|
|
|
37
37
|
]
|
|
38
38
|
```
|
|
39
39
|
|
|
40
|
-
**Vite / webpack**
|
|
40
|
+
**Vite / webpack** - import directly (after the tokens CSS):
|
|
41
41
|
|
|
42
42
|
```ts
|
|
43
43
|
import '@konce-pt/tokens/css';
|
|
@@ -54,7 +54,7 @@ Or compose the SCSS source into your own build:
|
|
|
54
54
|
## Layout
|
|
55
55
|
|
|
56
56
|
Layout is a separate, optional package: [`@konce-pt/grid`](https://www.npmjs.com/package/@konce-pt/grid)
|
|
57
|
-
|
|
57
|
+
- a mobile-first grid with flexbox, gap and order utilities. Load it right after this stylesheet:
|
|
58
58
|
|
|
59
59
|
```ts
|
|
60
60
|
import '@konce-pt/styles';
|
|
@@ -74,11 +74,11 @@ MIT © konce.pt
|
|
|
74
74
|
|
|
75
75
|
---
|
|
76
76
|
|
|
77
|
-
##
|
|
77
|
+
## Wersja polska
|
|
78
78
|
|
|
79
|
-
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`)
|
|
79
|
+
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.
|
|
80
80
|
|
|
81
|
-
**Angular CLI**
|
|
81
|
+
**Angular CLI** - `angular.json -> styles[]` (najpierw tokeny, potem ten plik, na końcu Twój `src/styles.scss`):
|
|
82
82
|
|
|
83
83
|
```jsonc
|
|
84
84
|
"styles": [
|
|
@@ -89,10 +89,10 @@ Bazowy arkusz stylów [Koncept UI](https://www.npmjs.com/package/@konce-pt/angul
|
|
|
89
89
|
]
|
|
90
90
|
```
|
|
91
91
|
|
|
92
|
-
**Vite/webpack**
|
|
92
|
+
**Vite/webpack** - `import '@konce-pt/tokens/css'; import '@konce-pt/tokens/css/dark'; import '@konce-pt/styles';`
|
|
93
93
|
|
|
94
94
|
**Układ** to osobna, opcjonalna paczka [`@konce-pt/grid`](https://www.npmjs.com/package/@konce-pt/grid)
|
|
95
|
-
(siatka mobile-first, flexbox, gap, order)
|
|
95
|
+
(siatka mobile-first, flexbox, gap, order) - ładuj ją zaraz po tym arkuszu. Pisze do tej samej
|
|
96
96
|
warstwy `kpt.utilities` i powtarza deklarację kolejności warstw, więc działa też bez tej paczki.
|
|
97
97
|
|
|
98
98
|
Pełny opis: [`llms.txt`](https://ui.konce.pt/llms/styles/llms.txt) (EN)
|