@patimweb/crtstyleguide 1.0.21 β 1.0.23
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 +38 -34
- package/dist/lib/{styles.css β assets/styles.css} +1 -1
- package/dist/lib/fonts/IBMPlexMono-Bold.ttf +0 -0
- package/dist/lib/fonts/IBMPlexMono-BoldItalic.ttf +0 -0
- package/dist/lib/fonts/IBMPlexMono-ExtraLight.ttf +0 -0
- package/dist/lib/fonts/IBMPlexMono-ExtraLightItalic.ttf +0 -0
- package/dist/lib/fonts/IBMPlexMono-Italic.ttf +0 -0
- package/dist/lib/fonts/IBMPlexMono-Light.ttf +0 -0
- package/dist/lib/fonts/IBMPlexMono-LightItalic.ttf +0 -0
- package/dist/lib/fonts/IBMPlexMono-Medium.ttf +0 -0
- package/dist/lib/fonts/IBMPlexMono-MediumItalic.ttf +0 -0
- package/dist/lib/fonts/IBMPlexMono-Regular.ttf +0 -0
- package/dist/lib/fonts/IBMPlexMono-SemiBold.ttf +0 -0
- package/dist/lib/fonts/IBMPlexMono-SemiBoldItalic.ttf +0 -0
- package/dist/lib/fonts/IBMPlexMono-Thin.ttf +0 -0
- package/dist/lib/fonts/IBMPlexMono-ThinItalic.ttf +0 -0
- package/dist/lib/index.js +786 -689
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -9,46 +9,50 @@
|
|
|
9
9
|
</p>
|
|
10
10
|
|
|
11
11
|
<p align="center">
|
|
12
|
-
<b>
|
|
13
|
-
|
|
14
|
-
<a href="https://smotherer007.github.io/crtstyleguide/">π₯οΈ Live Demo
|
|
12
|
+
<b>A modern Web Component Library with retro CRT aesthetic</b><br>
|
|
13
|
+
Built with Lit, TypeScript and Vite<br><br>
|
|
14
|
+
<a href="https://smotherer007.github.io/crtstyleguide/">π₯οΈ View Live Demo</a>
|
|
15
15
|
</p>
|
|
16
16
|
|
|
17
17
|
---
|
|
18
18
|
|
|
19
19
|
## β¨ Features
|
|
20
20
|
|
|
21
|
-
| Feature |
|
|
21
|
+
| Feature | Description |
|
|
22
22
|
|---------|-------------|
|
|
23
|
-
| π₯οΈ **CRT
|
|
24
|
-
| β‘ **Lit Web Components** |
|
|
25
|
-
| π¨ **Design Tokens** |
|
|
26
|
-
| π¦ **NPM-Ready** |
|
|
27
|
-
| π **TypeScript** |
|
|
28
|
-
| π **Living Style Guide** |
|
|
29
|
-
| βοΈ **Vite** |
|
|
23
|
+
| π₯οΈ **CRT Aesthetic** | Retro look with neon glow effects and monospace fonts |
|
|
24
|
+
| β‘ **Lit Web Components** | Modern, performant and lightweight components |
|
|
25
|
+
| π¨ **Design Tokens** | Consistent theming via CSS Custom Properties |
|
|
26
|
+
| π¦ **NPM-Ready** | Publishable as reusable package |
|
|
27
|
+
| π **TypeScript** | Full typing for better DX |
|
|
28
|
+
| π **Living Style Guide** | Interactive documentation of all components |
|
|
29
|
+
| βοΈ **Vite** | Lightning-fast development and optimized builds |
|
|
30
|
+
| π¨ **Multiple CRT Colors** | Green, Amber, and Blue phosphor variants |
|
|
31
|
+
| β¨ **Authentic Effects** | Scanlines, flicker, chromatic aberration |
|
|
30
32
|
|
|
31
33
|
---
|
|
32
34
|
|
|
33
|
-
## π
|
|
35
|
+
## π Project Structure
|
|
34
36
|
|
|
35
37
|
```
|
|
36
38
|
crtstyleguide/
|
|
37
39
|
βββ src/
|
|
38
40
|
β βββ components/
|
|
39
|
-
β β βββ atoms/ #
|
|
40
|
-
β β βββ molecules/ #
|
|
41
|
-
β β βββ organisms/ #
|
|
41
|
+
β β βββ atoms/ # Basic building blocks (Button, Input, Badge, etc.)
|
|
42
|
+
β β βββ molecules/ # Composite components (Card, Modal, Table)
|
|
43
|
+
β β βββ organisms/ # Complex UI areas (MusicStation)
|
|
42
44
|
β βββ styles/
|
|
43
45
|
β β βββ design-tokens.css # CSS Custom Properties
|
|
44
|
-
β β βββ index.css #
|
|
45
|
-
β βββ utils/ #
|
|
46
|
+
β β βββ index.css # Global Styles
|
|
47
|
+
β βββ utils/ # Helper functions
|
|
46
48
|
β βββ index.ts # Library Entry Point
|
|
47
49
|
βββ styleguide/ # Living Style Guide App
|
|
48
50
|
β βββ index.html
|
|
49
51
|
β βββ main.ts
|
|
50
52
|
β βββ template.ts
|
|
51
53
|
β βββ style.css
|
|
54
|
+
βββ public/
|
|
55
|
+
β βββ fonts/ # IBM Plex Mono font files
|
|
52
56
|
βββ vite.config.ts # Dev & Style Guide Build
|
|
53
57
|
βββ vite.lib.config.ts # Library Build
|
|
54
58
|
βββ tsconfig.json
|
|
@@ -70,34 +74,34 @@ npm install
|
|
|
70
74
|
npm run dev
|
|
71
75
|
```
|
|
72
76
|
|
|
73
|
-
|
|
77
|
+
Opens the Style Guide at: **http://localhost:5173/styleguide/**
|
|
74
78
|
|
|
75
79
|
---
|
|
76
80
|
|
|
77
|
-
## π
|
|
81
|
+
## π Available Scripts
|
|
78
82
|
|
|
79
|
-
| Script |
|
|
83
|
+
| Script | Description |
|
|
80
84
|
|--------|-------------|
|
|
81
|
-
| `npm run dev` |
|
|
82
|
-
| `npm run build` |
|
|
83
|
-
| `npm run build:lib` |
|
|
84
|
-
| `npm run preview` |
|
|
85
|
-
| `npm run type-check` | TypeScript
|
|
86
|
-
| `npm run lint` | ESLint
|
|
85
|
+
| `npm run dev` | Start development server |
|
|
86
|
+
| `npm run build` | Build Style Guide + Library |
|
|
87
|
+
| `npm run build:lib` | Build only library for npm |
|
|
88
|
+
| `npm run preview` | Preview production build |
|
|
89
|
+
| `npm run type-check` | TypeScript check without build |
|
|
90
|
+
| `npm run lint` | ESLint code check |
|
|
87
91
|
|
|
88
92
|
---
|
|
89
93
|
|
|
90
|
-
## π§©
|
|
94
|
+
## 𧩠Component Overview
|
|
91
95
|
|
|
92
|
-
### Atoms (
|
|
96
|
+
### Atoms (Basic Building Blocks)
|
|
93
97
|
|
|
94
|
-
|
|
|
98
|
+
| Component | Tag | Description |
|
|
95
99
|
|------------|-----|-------------|
|
|
96
|
-
| Button | `<crt-button>` |
|
|
97
|
-
| Badge | `<crt-badge>` | Status
|
|
98
|
-
| Input | `<crt-input>` |
|
|
99
|
-
| Select | `<crt-select>` | Dropdown
|
|
100
|
-
| Checkbox | `<crt-checkbox>` | Checkbox
|
|
100
|
+
| Button | `<crt-button>` | Interactive button with glow effect |
|
|
101
|
+
| Badge | `<crt-badge>` | Status labels and tags |
|
|
102
|
+
| Input | `<crt-input>` | Text fields and textarea |
|
|
103
|
+
| Select | `<crt-select>` | Dropdown selection |
|
|
104
|
+
| Checkbox | `<crt-checkbox>` | Checkbox input |
|
|
101
105
|
| Radio | `<crt-radio>` | Radio-Button |
|
|
102
106
|
| Toggle | `<crt-toggle>` | On/Off-Schalter |
|
|
103
107
|
| Slider | `<crt-slider>` | Wertebereich-Regler |
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"https://fonts.googleapis.com/css2?family=VT323&display=swap"
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=VT323&display=swap";@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-Thin.ttf) format("truetype");font-weight:100;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-ExtraLight.ttf) format("truetype");font-weight:200;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-Light.ttf) format("truetype");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-Regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-Medium.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-SemiBold.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-Bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-Italic.ttf) format("truetype");font-weight:400;font-style:italic;font-display:swap}:root{--crt-primary: #8aff8a;--crt-primary-light: #b4ffb4;--crt-primary-dark: #33ff33;--crt-bg-dark: #0a0a0a;--crt-bg-darker: #000000;--crt-bg-light: #1a1a1a;--crt-text-primary: #8aff8a;--crt-text-secondary: rgba(138, 255, 138, .7);--crt-text-muted: rgba(138, 255, 138, .5);--crt-success: #00ff00;--crt-warning: #ffff00;--crt-error: #ff0000;--crt-info: #00ffff;--crt-border-width: 2px;--crt-border-color: var(--crt-primary);--crt-border: var(--crt-border-width) solid var(--crt-border-color);--crt-radius: 0px;--crt-glow-sm: 0 0 5px rgba(138, 255, 138, .3);--crt-glow: 0 0 10px rgba(138, 255, 138, .5);--crt-glow-lg: 0 0 20px rgba(138, 255, 138, .7);--crt-glow-inset: inset 0 0 10px rgba(138, 255, 138, .1);--crt-font-family: "IBM Plex Mono", "Monaco", "Courier New", monospace;--crt-font-size-xs: .75rem;--crt-font-size-sm: .9rem;--crt-font-size-base: 1rem;--crt-font-size-lg: 1.25rem;--crt-font-size-xl: 1.5rem;--crt-font-size-2xl: 2rem;--crt-font-size-3xl: 2.5rem;--crt-line-height: 1.4;--crt-letter-spacing: 2px;--crt-spacing-xs: 4px;--crt-spacing-sm: 8px;--crt-spacing-md: 16px;--crt-spacing-lg: 24px;--crt-spacing-xl: 32px;--crt-spacing-2xl: 48px;--crt-transition: all .3s ease;--crt-cursor-default: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><rect width="8" height="16" fill="%238aff8a"/></svg>'), auto;--crt-cursor-pointer: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><rect width="12" height="12" fill="%238aff8a"/></svg>') 6 6, pointer;--crt-cursor-pointer-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><rect width="12" height="12" fill="%230a0a0a"/></svg>') 6 6, pointer;--crt-cursor-text: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="24" viewBox="0 0 16 24"><rect x="2" y="0" width="12" height="2" fill="%238aff8a"/><rect x="7" y="2" width="2" height="20" fill="%238aff8a"/><rect x="2" y="22" width="12" height="2" fill="%238aff8a"/></svg>') 8 12, text}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--crt-font-family);font-size:var(--crt-font-size-base);line-height:var(--crt-line-height);background-color:var(--crt-bg-dark);color:var(--crt-text-primary);text-shadow:0 0 3px var(--crt-primary)}body:before{content:"";position:fixed;top:0;left:0;width:100vw;height:100vh;background:none!important;pointer-events:none;z-index:9999}body:after{animation:none!important;opacity:0!important}@keyframes crt-flicker{0%,to{opacity:1}}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--crt-bg-dark);border:1px solid var(--crt-primary)}::-webkit-scrollbar-thumb{background:var(--crt-primary);border:1px solid var(--crt-bg-dark);box-shadow:var(--crt-glow)}::-webkit-scrollbar-thumb:hover{background:var(--crt-primary-light);box-shadow:var(--crt-glow-lg)}*{scrollbar-width:thin;scrollbar-color:var(--crt-primary) var(--crt-bg-dark)}.m-xs{margin:var(--crt-spacing-xs)}.m-sm{margin:var(--crt-spacing-sm)}.m-md{margin:var(--crt-spacing-md)}.m-lg{margin:var(--crt-spacing-lg)}.m-xl{margin:var(--crt-spacing-xl)}.m-2xl{margin:var(--crt-spacing-2xl)}.mt-xs{margin-top:var(--crt-spacing-xs)}.mt-sm{margin-top:var(--crt-spacing-sm)}.mt-md{margin-top:var(--crt-spacing-md)}.mt-lg{margin-top:var(--crt-spacing-lg)}.mt-xl{margin-top:var(--crt-spacing-xl)}.mt-2xl{margin-top:var(--crt-spacing-2xl)}.mr-xs{margin-right:var(--crt-spacing-xs)}.mr-sm{margin-right:var(--crt-spacing-sm)}.mr-md{margin-right:var(--crt-spacing-md)}.mr-lg{margin-right:var(--crt-spacing-lg)}.mr-xl{margin-right:var(--crt-spacing-xl)}.mr-2xl{margin-right:var(--crt-spacing-2xl)}.mb-xs{margin-bottom:var(--crt-spacing-xs)}.mb-sm{margin-bottom:var(--crt-spacing-sm)}.mb-md{margin-bottom:var(--crt-spacing-md)}.mb-lg{margin-bottom:var(--crt-spacing-lg)}.mb-xl{margin-bottom:var(--crt-spacing-xl)}.mb-2xl{margin-bottom:var(--crt-spacing-2xl)}.ml-xs{margin-left:var(--crt-spacing-xs)}.ml-sm{margin-left:var(--crt-spacing-sm)}.ml-md{margin-left:var(--crt-spacing-md)}.ml-lg{margin-left:var(--crt-spacing-lg)}.ml-xl{margin-left:var(--crt-spacing-xl)}.ml-2xl{margin-left:var(--crt-spacing-2xl)}.mx-xs{margin-left:var(--crt-spacing-xs);margin-right:var(--crt-spacing-xs)}.mx-sm{margin-left:var(--crt-spacing-sm);margin-right:var(--crt-spacing-sm)}.mx-md{margin-left:var(--crt-spacing-md);margin-right:var(--crt-spacing-md)}.mx-lg{margin-left:var(--crt-spacing-lg);margin-right:var(--crt-spacing-lg)}.mx-xl{margin-left:var(--crt-spacing-xl);margin-right:var(--crt-spacing-xl)}.mx-2xl{margin-left:var(--crt-spacing-2xl);margin-right:var(--crt-spacing-2xl)}.my-xs{margin-top:var(--crt-spacing-xs);margin-bottom:var(--crt-spacing-xs)}.my-sm{margin-top:var(--crt-spacing-sm);margin-bottom:var(--crt-spacing-sm)}.my-md{margin-top:var(--crt-spacing-md);margin-bottom:var(--crt-spacing-md)}.my-lg{margin-top:var(--crt-spacing-lg);margin-bottom:var(--crt-spacing-lg)}.my-xl{margin-top:var(--crt-spacing-xl);margin-bottom:var(--crt-spacing-xl)}.my-2xl{margin-top:var(--crt-spacing-2xl);margin-bottom:var(--crt-spacing-2xl)}.p-xs{padding:var(--crt-spacing-xs)}.p-sm{padding:var(--crt-spacing-sm)}.p-md{padding:var(--crt-spacing-md)}.p-lg{padding:var(--crt-spacing-lg)}.p-xl{padding:var(--crt-spacing-xl)}.p-2xl{padding:var(--crt-spacing-2xl)}.pt-xs{padding-top:var(--crt-spacing-xs)}.pt-sm{padding-top:var(--crt-spacing-sm)}.pt-md{padding-top:var(--crt-spacing-md)}.pt-lg{padding-top:var(--crt-spacing-lg)}.pt-xl{padding-top:var(--crt-spacing-xl)}.pt-2xl{padding-top:var(--crt-spacing-2xl)}.pr-xs{padding-right:var(--crt-spacing-xs)}.pr-sm{padding-right:var(--crt-spacing-sm)}.pr-md{padding-right:var(--crt-spacing-md)}.pr-lg{padding-right:var(--crt-spacing-lg)}.pr-xl{padding-right:var(--crt-spacing-xl)}.pr-2xl{padding-right:var(--crt-spacing-2xl)}.pb-xs{padding-bottom:var(--crt-spacing-xs)}.pb-sm{padding-bottom:var(--crt-spacing-sm)}.pb-md{padding-bottom:var(--crt-spacing-md)}.pb-lg{padding-bottom:var(--crt-spacing-lg)}.pb-xl{padding-bottom:var(--crt-spacing-xl)}.pb-2xl{padding-bottom:var(--crt-spacing-2xl)}.pl-xs{padding-left:var(--crt-spacing-xs)}.pl-sm{padding-left:var(--crt-spacing-sm)}.pl-md{padding-left:var(--crt-spacing-md)}.pl-lg{padding-left:var(--crt-spacing-lg)}.pl-xl{padding-left:var(--crt-spacing-xl)}.pl-2xl{padding-left:var(--crt-spacing-2xl)}.px-xs{padding-left:var(--crt-spacing-xs);padding-right:var(--crt-spacing-xs)}.px-sm{padding-left:var(--crt-spacing-sm);padding-right:var(--crt-spacing-sm)}.px-md{padding-left:var(--crt-spacing-md);padding-right:var(--crt-spacing-md)}.px-lg{padding-left:var(--crt-spacing-lg);padding-right:var(--crt-spacing-lg)}.px-xl{padding-left:var(--crt-spacing-xl);padding-right:var(--crt-spacing-xl)}.px-2xl{padding-left:var(--crt-spacing-2xl);padding-right:var(--crt-spacing-2xl)}.py-xs{padding-top:var(--crt-spacing-xs);padding-bottom:var(--crt-spacing-xs)}.py-sm{padding-top:var(--crt-spacing-sm);padding-bottom:var(--crt-spacing-sm)}.py-md{padding-top:var(--crt-spacing-md);padding-bottom:var(--crt-spacing-md)}.py-lg{padding-top:var(--crt-spacing-lg);padding-bottom:var(--crt-spacing-lg)}.py-xl{padding-top:var(--crt-spacing-xl);padding-bottom:var(--crt-spacing-xl)}.py-2xl{padding-top:var(--crt-spacing-2xl);padding-bottom:var(--crt-spacing-2xl)}
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|