@catcatcatstudio/cat-1a 0.1.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/PKG-README.md +66 -0
- package/README.md +21 -0
- package/components/components.css +10221 -0
- package/components/mode-bar.js +166 -0
- package/package.json +29 -0
- package/tokens/tokens.css +133 -0
package/PKG-README.md
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
# @catcatcat/cat-1a
|
|
2
|
+
|
|
3
|
+
cat-1a design system. Warm greige, IBM Plex Mono, uppercase system text, flat by default.
|
|
4
|
+
|
|
5
|
+
50 components, 4 color modes (greige, mint, light, dark), full motion system.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @catcatcat/cat-1a
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Setup
|
|
14
|
+
|
|
15
|
+
Load the font and CSS:
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
19
|
+
<link rel="stylesheet" href="node_modules/@catcatcat/cat-1a/tokens/tokens.css">
|
|
20
|
+
<link rel="stylesheet" href="node_modules/@catcatcat/cat-1a/components/components.css">
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Or with a bundler:
|
|
24
|
+
|
|
25
|
+
```css
|
|
26
|
+
@import '@catcatcat/cat-1a/tokens.css';
|
|
27
|
+
@import '@catcatcat/cat-1a/components.css';
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Mode Bar (theme switcher)
|
|
31
|
+
|
|
32
|
+
```js
|
|
33
|
+
import { ModeBar } from '@catcatcat/cat-1a/mode-bar'
|
|
34
|
+
|
|
35
|
+
// Initialize on a .mode-bar element
|
|
36
|
+
ModeBar.init(document.querySelector('.mode-bar'))
|
|
37
|
+
|
|
38
|
+
// Or initialize all .mode-bar elements on the page
|
|
39
|
+
ModeBar.initAll()
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
Prevent flash of default theme by adding this to your `<head>`:
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<script>try{var s=JSON.parse(localStorage.getItem('catalog-mode'));if(s){var m=s.tp==='colorway'?[{"name":"greige"},{"name":"mint"}][s.ci||0].name:s.br;if(m&&m!=='greige')document.documentElement.setAttribute('data-theme',m);}}catch(e){}</script>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Color Modes
|
|
49
|
+
|
|
50
|
+
```html
|
|
51
|
+
<!-- Default (greige) -->
|
|
52
|
+
<html>
|
|
53
|
+
|
|
54
|
+
<!-- Mint colorway -->
|
|
55
|
+
<html data-theme="mint">
|
|
56
|
+
|
|
57
|
+
<!-- Light -->
|
|
58
|
+
<html data-theme="light">
|
|
59
|
+
|
|
60
|
+
<!-- Dark -->
|
|
61
|
+
<html data-theme="dark">
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## Font Requirement
|
|
65
|
+
|
|
66
|
+
cat-1a requires IBM Plex Mono. Load it via Google Fonts or self-host. Without it, the system falls back to the browser's default monospace and the visual identity breaks.
|
package/README.md
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# catcatcat/design
|
|
2
|
+
|
|
3
|
+
The design system for catcatcat. Everything that carries forward — how we look, move, and feel.
|
|
4
|
+
|
|
5
|
+
## Structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
frame/ Visual languages. cat-1a is the current default.
|
|
9
|
+
README.md Frame system guide — shared patterns, how to create new frames.
|
|
10
|
+
cat-1a/ cat-1a spec — warm greige, IBM Plex Mono, precision tool aesthetic.
|
|
11
|
+
tokens/ Design tokens — CSS variables per frame.
|
|
12
|
+
components/ Documented UI patterns and component specs.
|
|
13
|
+
brand/ Brand identity, logo specs, voice and tone.
|
|
14
|
+
decisions/ Design decisions worth recording.
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Quick start
|
|
18
|
+
|
|
19
|
+
1. Read [`frame/README.md`](frame/README.md) to understand the frame system
|
|
20
|
+
2. Read [`frame/cat-1a/cat-1a.md`](frame/cat-1a/cat-1a.md) for the default aesthetic
|
|
21
|
+
3. Pull `tokens/tokens.css` into your project for cat-1a tokens
|