@credenza3/css 0.0.1-alpha.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 +308 -0
- package/package.json +44 -0
- package/src/badges.css +158 -0
- package/src/base.css +62 -0
- package/src/buttons.css +317 -0
- package/src/controls.css +307 -0
- package/src/index.css +20 -0
- package/src/variables.css +52 -0
- package/tailwind-preset.js +135 -0
package/README.md
ADDED
|
@@ -0,0 +1,308 @@
|
|
|
1
|
+
# Credenza Styling
|
|
2
|
+
|
|
3
|
+
Credenza design system — CSS tokens, component styles, and a Tailwind CSS preset based on the Credenza style guide.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
npm install credenza-styling
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### 1. Import the CSS
|
|
14
|
+
|
|
15
|
+
Import the full stylesheet into your project to get all Credenza design tokens (CSS custom properties), base heading styles, and component classes.
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
/* In your main CSS file */
|
|
19
|
+
@import "credenza-styling";
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
Or in a JavaScript / framework entry point:
|
|
23
|
+
|
|
24
|
+
```js
|
|
25
|
+
import "credenza-styling";
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
You can also import individual modules:
|
|
29
|
+
|
|
30
|
+
```css
|
|
31
|
+
@import "credenza-styling/variables.css"; /* CSS custom properties only */
|
|
32
|
+
@import "credenza-styling/base.css"; /* Poppins font + heading styles */
|
|
33
|
+
@import "credenza-styling/buttons.css"; /* Button components */
|
|
34
|
+
@import "credenza-styling/badges.css"; /* Badge components */
|
|
35
|
+
@import "credenza-styling/controls.css"; /* Toggle, avatar, steps */
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### 2. Tailwind CSS Preset
|
|
39
|
+
|
|
40
|
+
Add the Credenza preset to your `tailwind.config.js` to get all design tokens available as Tailwind utility classes:
|
|
41
|
+
|
|
42
|
+
```js
|
|
43
|
+
const credenzaPreset = require("credenza-styling/tailwind-preset");
|
|
44
|
+
|
|
45
|
+
module.exports = {
|
|
46
|
+
presets: [credenzaPreset],
|
|
47
|
+
// ... rest of your config
|
|
48
|
+
};
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
This extends your Tailwind theme with Credenza colors, fonts, and sizes. You can then use classes like:
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<p class="font-poppins text-credenza bg-irish">Hello</p>
|
|
55
|
+
<h1 class="text-h1 font-poppins">Heading 1</h1>
|
|
56
|
+
<span class="text-skol bg-triple-crown px-3 py-1 rounded-pill">Tag</span>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## Design Tokens
|
|
62
|
+
|
|
63
|
+
### CSS Custom Properties
|
|
64
|
+
|
|
65
|
+
All tokens are available as CSS custom properties on `:root`. Use them anywhere:
|
|
66
|
+
|
|
67
|
+
```css
|
|
68
|
+
.my-component {
|
|
69
|
+
font-family: var(--cr-font-family);
|
|
70
|
+
color: var(--cr-color-credenza);
|
|
71
|
+
background-color: var(--cr-color-irish);
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### Colors
|
|
76
|
+
|
|
77
|
+
| Token | Name | Hex |
|
|
78
|
+
| --- | --- | --- |
|
|
79
|
+
| **Primary** | | |
|
|
80
|
+
| `--cr-color-credenza` | Credenza | `#333333` |
|
|
81
|
+
| `--cr-color-digital` | Digital | `#707070` |
|
|
82
|
+
| `--cr-color-the-lake-show` | The Lake Show | `#acf7ea` |
|
|
83
|
+
| `--cr-color-skol` | Skol | `#731b98` |
|
|
84
|
+
| **Secondary** | | |
|
|
85
|
+
| `--cr-color-irish` | Irish | `#e0f4eb` |
|
|
86
|
+
| `--cr-color-oriole` | Oriole | `#ffdec1` |
|
|
87
|
+
| `--cr-color-rose` | Rose | `#ffd5d3` |
|
|
88
|
+
| `--cr-color-triple-crown` | Triple Crown | `#efe6ff` |
|
|
89
|
+
| **Grayscale** | | |
|
|
90
|
+
| `--cr-color-white` | White | `#ffffff` |
|
|
91
|
+
| `--cr-color-gray` | Gray | `#eeeeee` |
|
|
92
|
+
| `--cr-color-lite-gray-1` | Lite Gray 1 | `#dddddd` |
|
|
93
|
+
| `--cr-color-med-gray-2` | Med. Gray 2 | `#bbbbbb` |
|
|
94
|
+
| `--cr-color-med-gray-1` | Med. Gray 1 | `#888888` |
|
|
95
|
+
| `--cr-color-dark-gray-1` | Dark Gray 1 | `#454545` |
|
|
96
|
+
| **Semantic** | | |
|
|
97
|
+
| `--cr-color-success` | Success | `#4caf50` |
|
|
98
|
+
| `--cr-color-info` | Info | `#9c27b0` |
|
|
99
|
+
| `--cr-color-warning` | Warning | `#ff9800` |
|
|
100
|
+
| `--cr-color-alert` | Alert | `#f44336` |
|
|
101
|
+
| `--cr-color-link` | Link | `#e91e63` |
|
|
102
|
+
|
|
103
|
+
### Tailwind Color Classes
|
|
104
|
+
|
|
105
|
+
With the preset enabled you get:
|
|
106
|
+
|
|
107
|
+
- `bg-credenza`, `text-credenza`, `border-credenza`
|
|
108
|
+
- `bg-skol`, `text-skol`, `border-skol`
|
|
109
|
+
- `bg-the-lake-show`, `text-the-lake-show`
|
|
110
|
+
- `bg-irish`, `bg-oriole`, `bg-rose`, `bg-triple-crown`
|
|
111
|
+
- `bg-cr-success`, `bg-cr-info`, `bg-cr-warning`, `bg-cr-alert`, `bg-cr-link`
|
|
112
|
+
- … and all `text-*`, `border-*`, `ring-*` variants of the above
|
|
113
|
+
|
|
114
|
+
### Typography
|
|
115
|
+
|
|
116
|
+
| Heading | Font | Weight | Size |
|
|
117
|
+
| --- | --- | --- | --- |
|
|
118
|
+
| H1 | Poppins | Regular (400) | 30px |
|
|
119
|
+
| H2 | Poppins | Light (300) | 24px |
|
|
120
|
+
| H3 | Poppins | Medium (500) | 18px |
|
|
121
|
+
| H4 | Poppins | Regular (400) | 16px |
|
|
122
|
+
| H5 | Poppins | Regular (400) | 14px |
|
|
123
|
+
| H6 | Poppins | Regular (400) | 12px |
|
|
124
|
+
|
|
125
|
+
Native `<h1>` – `<h6>` elements are styled automatically when you import `base.css`.
|
|
126
|
+
|
|
127
|
+
With the Tailwind preset you can also apply heading styles to any element:
|
|
128
|
+
|
|
129
|
+
```html
|
|
130
|
+
<span class="text-h1 font-poppins">Looks like an H1</span>
|
|
131
|
+
<div class="text-h3 font-poppins">Looks like an H3</div>
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
Font weight classes: `font-extralight`, `font-light`, `font-regular`, `font-medium`, `font-bold`, `font-black`.
|
|
135
|
+
|
|
136
|
+
---
|
|
137
|
+
|
|
138
|
+
## Component Classes
|
|
139
|
+
|
|
140
|
+
### Buttons
|
|
141
|
+
|
|
142
|
+
```html
|
|
143
|
+
<!-- Primary button -->
|
|
144
|
+
<button class="cr-btn cr-btn-primary">Button</button>
|
|
145
|
+
|
|
146
|
+
<!-- Outline button -->
|
|
147
|
+
<button class="cr-btn cr-btn-outline">Button</button>
|
|
148
|
+
|
|
149
|
+
<!-- Status buttons -->
|
|
150
|
+
<button class="cr-btn cr-btn-success">Success</button>
|
|
151
|
+
<button class="cr-btn cr-btn-info">Info</button>
|
|
152
|
+
<button class="cr-btn cr-btn-warning">Warning</button>
|
|
153
|
+
<button class="cr-btn cr-btn-alert">Alert</button>
|
|
154
|
+
|
|
155
|
+
<!-- Link-style button -->
|
|
156
|
+
<button class="cr-btn cr-btn-link">Link</button>
|
|
157
|
+
|
|
158
|
+
<!-- Disabled state -->
|
|
159
|
+
<button class="cr-btn cr-btn-primary" disabled>Disabled</button>
|
|
160
|
+
|
|
161
|
+
<!-- Sizes -->
|
|
162
|
+
<button class="cr-btn cr-btn-primary cr-btn-sm">Small</button>
|
|
163
|
+
<button class="cr-btn cr-btn-primary cr-btn-lg">Large</button>
|
|
164
|
+
|
|
165
|
+
<!-- Login / social button -->
|
|
166
|
+
<button class="cr-btn-login">
|
|
167
|
+
<img class="cr-btn-login-icon" src="google.svg" alt="" />
|
|
168
|
+
Continue with Google
|
|
169
|
+
</button>
|
|
170
|
+
|
|
171
|
+
<!-- Icon-only social button -->
|
|
172
|
+
<button class="cr-btn-login-icon-only">
|
|
173
|
+
<img class="cr-btn-login-icon" src="google.svg" alt="Google" />
|
|
174
|
+
</button>
|
|
175
|
+
|
|
176
|
+
<!-- App button (e.g. Open Gmail) -->
|
|
177
|
+
<a class="cr-btn-app" href="#">
|
|
178
|
+
<img class="cr-btn-app-icon" src="gmail.svg" alt="" />
|
|
179
|
+
Open Gmail
|
|
180
|
+
</a>
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
### Badges
|
|
184
|
+
|
|
185
|
+
```html
|
|
186
|
+
<!-- Status badges -->
|
|
187
|
+
<span class="cr-badge cr-badge-success">Success</span>
|
|
188
|
+
<span class="cr-badge cr-badge-pending">Pending</span>
|
|
189
|
+
<span class="cr-badge cr-badge-failed">Failed</span>
|
|
190
|
+
<span class="cr-badge cr-badge-info">Info</span>
|
|
191
|
+
|
|
192
|
+
<!-- Outline badges -->
|
|
193
|
+
<span class="cr-badge cr-badge-outline-success">Success</span>
|
|
194
|
+
|
|
195
|
+
<!-- Count badges -->
|
|
196
|
+
<span class="cr-badge-count">1</span>
|
|
197
|
+
<span class="cr-badge-count">10</span>
|
|
198
|
+
<span class="cr-badge-count cr-badge-count-alert">100</span>
|
|
199
|
+
|
|
200
|
+
<!-- Powered by badge -->
|
|
201
|
+
<span class="cr-badge-powered">
|
|
202
|
+
<img class="cr-badge-powered-icon" src="credenza-icon.svg" alt="" />
|
|
203
|
+
Powered by Credenza
|
|
204
|
+
</span>
|
|
205
|
+
|
|
206
|
+
<!-- Sizes -->
|
|
207
|
+
<span class="cr-badge cr-badge-success cr-badge-sm">Small</span>
|
|
208
|
+
<span class="cr-badge cr-badge-success cr-badge-lg">Large</span>
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
### Toggle
|
|
212
|
+
|
|
213
|
+
```html
|
|
214
|
+
<label class="cr-toggle">
|
|
215
|
+
<input type="checkbox" class="cr-toggle-input" />
|
|
216
|
+
<span class="cr-toggle-track"></span>
|
|
217
|
+
<span class="cr-toggle-label">Enable notifications</span>
|
|
218
|
+
</label>
|
|
219
|
+
|
|
220
|
+
<!-- With Off / On labels -->
|
|
221
|
+
<label class="cr-toggle">
|
|
222
|
+
<span class="cr-toggle-label-off">Off</span>
|
|
223
|
+
<input type="checkbox" class="cr-toggle-input" />
|
|
224
|
+
<span class="cr-toggle-track"></span>
|
|
225
|
+
<span class="cr-toggle-label-on">On</span>
|
|
226
|
+
</label>
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
### Avatars
|
|
230
|
+
|
|
231
|
+
```html
|
|
232
|
+
<!-- Image avatar -->
|
|
233
|
+
<span class="cr-avatar cr-avatar-md">
|
|
234
|
+
<img src="photo.jpg" alt="User" />
|
|
235
|
+
</span>
|
|
236
|
+
|
|
237
|
+
<!-- Initials avatar -->
|
|
238
|
+
<span class="cr-avatar cr-avatar-md">
|
|
239
|
+
<span class="cr-avatar-initials">JD</span>
|
|
240
|
+
</span>
|
|
241
|
+
|
|
242
|
+
<!-- With status dot -->
|
|
243
|
+
<span class="cr-avatar cr-avatar-md cr-avatar-status">
|
|
244
|
+
<img src="photo.jpg" alt="User" />
|
|
245
|
+
</span>
|
|
246
|
+
|
|
247
|
+
<!-- Avatar group -->
|
|
248
|
+
<div class="cr-avatar-group">
|
|
249
|
+
<span class="cr-avatar cr-avatar-sm"><img src="a.jpg" alt="" /></span>
|
|
250
|
+
<span class="cr-avatar cr-avatar-sm"><img src="b.jpg" alt="" /></span>
|
|
251
|
+
<span class="cr-avatar cr-avatar-sm"><img src="c.jpg" alt="" /></span>
|
|
252
|
+
</div>
|
|
253
|
+
|
|
254
|
+
<!-- Sizes: cr-avatar-xs, cr-avatar-sm, cr-avatar-md, cr-avatar-lg, cr-avatar-xl -->
|
|
255
|
+
```
|
|
256
|
+
|
|
257
|
+
### Steps
|
|
258
|
+
|
|
259
|
+
```html
|
|
260
|
+
<div class="cr-steps">
|
|
261
|
+
<div class="cr-step cr-step-completed">
|
|
262
|
+
<span class="cr-step-indicator">1</span>
|
|
263
|
+
</div>
|
|
264
|
+
<div class="cr-step-connector"></div>
|
|
265
|
+
<div class="cr-step cr-step-active">
|
|
266
|
+
<span class="cr-step-indicator">2</span>
|
|
267
|
+
</div>
|
|
268
|
+
<div class="cr-step-connector"></div>
|
|
269
|
+
<div class="cr-step">
|
|
270
|
+
<span class="cr-step-indicator">3</span>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
|
|
274
|
+
<!-- Dot-style steps -->
|
|
275
|
+
<div class="cr-steps">
|
|
276
|
+
<div class="cr-step cr-step-dot cr-step-completed">
|
|
277
|
+
<span class="cr-step-indicator"></span>
|
|
278
|
+
</div>
|
|
279
|
+
<div class="cr-step cr-step-dot cr-step-active">
|
|
280
|
+
<span class="cr-step-indicator"></span>
|
|
281
|
+
</div>
|
|
282
|
+
<div class="cr-step cr-step-dot">
|
|
283
|
+
<span class="cr-step-indicator"></span>
|
|
284
|
+
</div>
|
|
285
|
+
</div>
|
|
286
|
+
```
|
|
287
|
+
|
|
288
|
+
---
|
|
289
|
+
|
|
290
|
+
## File Structure
|
|
291
|
+
|
|
292
|
+
```
|
|
293
|
+
credenza-styling/
|
|
294
|
+
├── src/
|
|
295
|
+
│ ├── index.css ← main entry (imports everything)
|
|
296
|
+
│ ├── variables.css ← CSS custom properties (design tokens)
|
|
297
|
+
│ ├── base.css ← Poppins font import & heading styles
|
|
298
|
+
│ ├── buttons.css ← Button component classes
|
|
299
|
+
│ ├── badges.css ← Badge component classes
|
|
300
|
+
│ └── controls.css ← Toggle, avatar, steps components
|
|
301
|
+
├── tailwind-preset.js ← Tailwind CSS theme preset
|
|
302
|
+
├── package.json
|
|
303
|
+
└── README.md
|
|
304
|
+
```
|
|
305
|
+
|
|
306
|
+
## License
|
|
307
|
+
|
|
308
|
+
ISC
|
package/package.json
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@credenza3/css",
|
|
3
|
+
"version": "0.0.1-alpha.0",
|
|
4
|
+
"description": "Credenza design system — CSS tokens, component styles, and Tailwind CSS preset based on the Credenza style guide.",
|
|
5
|
+
"main": "src/index.css",
|
|
6
|
+
"style": "src/index.css",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": "./src/index.css",
|
|
9
|
+
"./index.css": "./src/index.css",
|
|
10
|
+
"./variables.css": "./src/variables.css",
|
|
11
|
+
"./base.css": "./src/base.css",
|
|
12
|
+
"./buttons.css": "./src/buttons.css",
|
|
13
|
+
"./badges.css": "./src/badges.css",
|
|
14
|
+
"./controls.css": "./src/controls.css",
|
|
15
|
+
"./tailwind-preset": "./tailwind-preset.js"
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"src",
|
|
19
|
+
"tailwind-preset.js",
|
|
20
|
+
"README.md"
|
|
21
|
+
],
|
|
22
|
+
"repository": {
|
|
23
|
+
"type": "git",
|
|
24
|
+
"url": "https://github.com/credenza-web3/credenza-styling.git"
|
|
25
|
+
},
|
|
26
|
+
"keywords": [
|
|
27
|
+
"credenza",
|
|
28
|
+
"credenza3",
|
|
29
|
+
"css",
|
|
30
|
+
"design-system",
|
|
31
|
+
"tailwind",
|
|
32
|
+
"tailwind-preset",
|
|
33
|
+
"style-guide",
|
|
34
|
+
"poppins"
|
|
35
|
+
],
|
|
36
|
+
"author": "",
|
|
37
|
+
"license": "ISC",
|
|
38
|
+
"publishConfig": {
|
|
39
|
+
"access": "public"
|
|
40
|
+
},
|
|
41
|
+
"scripts": {
|
|
42
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
43
|
+
}
|
|
44
|
+
}
|
package/src/badges.css
ADDED
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
Credenza Badge Components
|
|
3
|
+
========================================================================== */
|
|
4
|
+
|
|
5
|
+
/* -----------------------------------------------------------------------
|
|
6
|
+
Base Badge
|
|
7
|
+
----------------------------------------------------------------------- */
|
|
8
|
+
|
|
9
|
+
.cr-badge {
|
|
10
|
+
display: inline-flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
padding: 0.125rem 0.625rem;
|
|
14
|
+
font-family: var(--cr-font-family);
|
|
15
|
+
font-size: 0.75rem;
|
|
16
|
+
font-weight: var(--cr-font-medium);
|
|
17
|
+
line-height: 1.5;
|
|
18
|
+
white-space: nowrap;
|
|
19
|
+
border-radius: 9999px;
|
|
20
|
+
vertical-align: middle;
|
|
21
|
+
user-select: none;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* -----------------------------------------------------------------------
|
|
25
|
+
Status Badges
|
|
26
|
+
----------------------------------------------------------------------- */
|
|
27
|
+
|
|
28
|
+
/* Success — green */
|
|
29
|
+
.cr-badge-success {
|
|
30
|
+
background-color: var(--cr-color-success);
|
|
31
|
+
color: var(--cr-color-white);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Pending — orange / warning */
|
|
35
|
+
.cr-badge-pending {
|
|
36
|
+
background-color: var(--cr-color-warning);
|
|
37
|
+
color: var(--cr-color-white);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* Failed — red / alert */
|
|
41
|
+
.cr-badge-failed {
|
|
42
|
+
background-color: var(--cr-color-alert);
|
|
43
|
+
color: var(--cr-color-white);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* Info — purple */
|
|
47
|
+
.cr-badge-info {
|
|
48
|
+
background-color: var(--cr-color-info);
|
|
49
|
+
color: var(--cr-color-white);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* -----------------------------------------------------------------------
|
|
53
|
+
Outline / Subtle Variants
|
|
54
|
+
----------------------------------------------------------------------- */
|
|
55
|
+
|
|
56
|
+
.cr-badge-outline-success {
|
|
57
|
+
background-color: transparent;
|
|
58
|
+
color: var(--cr-color-success);
|
|
59
|
+
box-shadow: inset 0 0 0 1px var(--cr-color-success);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.cr-badge-outline-pending {
|
|
63
|
+
background-color: transparent;
|
|
64
|
+
color: var(--cr-color-warning);
|
|
65
|
+
box-shadow: inset 0 0 0 1px var(--cr-color-warning);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.cr-badge-outline-failed {
|
|
69
|
+
background-color: transparent;
|
|
70
|
+
color: var(--cr-color-alert);
|
|
71
|
+
box-shadow: inset 0 0 0 1px var(--cr-color-alert);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.cr-badge-outline-info {
|
|
75
|
+
background-color: transparent;
|
|
76
|
+
color: var(--cr-color-info);
|
|
77
|
+
box-shadow: inset 0 0 0 1px var(--cr-color-info);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* -----------------------------------------------------------------------
|
|
81
|
+
Numbered Badge (count pill — e.g. 1, 10, 100)
|
|
82
|
+
----------------------------------------------------------------------- */
|
|
83
|
+
|
|
84
|
+
.cr-badge-count {
|
|
85
|
+
display: inline-flex;
|
|
86
|
+
align-items: center;
|
|
87
|
+
justify-content: center;
|
|
88
|
+
min-width: 1.375rem;
|
|
89
|
+
height: 1.375rem;
|
|
90
|
+
padding: 0 0.375rem;
|
|
91
|
+
font-family: var(--cr-font-family);
|
|
92
|
+
font-size: 0.6875rem;
|
|
93
|
+
font-weight: var(--cr-font-medium);
|
|
94
|
+
line-height: 1;
|
|
95
|
+
color: var(--cr-color-white);
|
|
96
|
+
background-color: var(--cr-color-credenza);
|
|
97
|
+
border-radius: 9999px;
|
|
98
|
+
white-space: nowrap;
|
|
99
|
+
user-select: none;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.cr-badge-count-success {
|
|
103
|
+
background-color: var(--cr-color-success);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.cr-badge-count-warning {
|
|
107
|
+
background-color: var(--cr-color-warning);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.cr-badge-count-alert {
|
|
111
|
+
background-color: var(--cr-color-alert);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.cr-badge-count-info {
|
|
115
|
+
background-color: var(--cr-color-info);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* -----------------------------------------------------------------------
|
|
119
|
+
"Powered by Credenza" Badge
|
|
120
|
+
----------------------------------------------------------------------- */
|
|
121
|
+
|
|
122
|
+
.cr-badge-powered {
|
|
123
|
+
display: inline-flex;
|
|
124
|
+
align-items: center;
|
|
125
|
+
gap: 0.375rem;
|
|
126
|
+
padding: 0.25rem 0.625rem;
|
|
127
|
+
font-family: var(--cr-font-family);
|
|
128
|
+
font-size: 0.6875rem;
|
|
129
|
+
font-weight: var(--cr-font-medium);
|
|
130
|
+
line-height: 1.5;
|
|
131
|
+
color: var(--cr-color-credenza);
|
|
132
|
+
background-color: var(--cr-color-white);
|
|
133
|
+
border: 1px solid var(--cr-color-lite-gray-1);
|
|
134
|
+
border-radius: 0.25rem;
|
|
135
|
+
white-space: nowrap;
|
|
136
|
+
user-select: none;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.cr-badge-powered-icon {
|
|
140
|
+
flex-shrink: 0;
|
|
141
|
+
width: 0.875rem;
|
|
142
|
+
height: 0.875rem;
|
|
143
|
+
object-fit: contain;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/* -----------------------------------------------------------------------
|
|
147
|
+
Badge Sizes
|
|
148
|
+
----------------------------------------------------------------------- */
|
|
149
|
+
|
|
150
|
+
.cr-badge-sm {
|
|
151
|
+
padding: 0.0625rem 0.5rem;
|
|
152
|
+
font-size: 0.625rem;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.cr-badge-lg {
|
|
156
|
+
padding: 0.25rem 0.75rem;
|
|
157
|
+
font-size: 0.875rem;
|
|
158
|
+
}
|
package/src/base.css
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
Credenza Base — Poppins Font Import & Heading Styles
|
|
3
|
+
========================================================================== */
|
|
4
|
+
|
|
5
|
+
/* Google Fonts — Poppins (all weights from the style guide) */
|
|
6
|
+
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,700;0,900;1,200;1,300;1,400;1,500;1,700;1,900&display=swap");
|
|
7
|
+
|
|
8
|
+
/* -----------------------------------------------------------------------
|
|
9
|
+
Headings (from the style guide)
|
|
10
|
+
H1 — Poppins Regular 30
|
|
11
|
+
H2 — Poppins Light 24
|
|
12
|
+
H3 — Poppins Medium 18
|
|
13
|
+
H4 — Poppins Regular 16
|
|
14
|
+
H5 — Poppins Regular 14
|
|
15
|
+
H6 — Poppins Regular 12
|
|
16
|
+
----------------------------------------------------------------------- */
|
|
17
|
+
|
|
18
|
+
h1,
|
|
19
|
+
h2,
|
|
20
|
+
h3,
|
|
21
|
+
h4,
|
|
22
|
+
h5,
|
|
23
|
+
h6 {
|
|
24
|
+
font-family: var(--cr-font-family);
|
|
25
|
+
color: var(--cr-color-credenza);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
h1 {
|
|
29
|
+
font-size: 1.875rem; /* 30px */
|
|
30
|
+
font-weight: var(--cr-font-regular);
|
|
31
|
+
line-height: 1.25;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
h2 {
|
|
35
|
+
font-size: 1.5rem; /* 24px */
|
|
36
|
+
font-weight: var(--cr-font-light);
|
|
37
|
+
line-height: 1.25;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
h3 {
|
|
41
|
+
font-size: 1.125rem; /* 18px */
|
|
42
|
+
font-weight: var(--cr-font-medium);
|
|
43
|
+
line-height: 1.375;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
h4 {
|
|
47
|
+
font-size: 1rem; /* 16px */
|
|
48
|
+
font-weight: var(--cr-font-regular);
|
|
49
|
+
line-height: 1.375;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
h5 {
|
|
53
|
+
font-size: 0.875rem; /* 14px */
|
|
54
|
+
font-weight: var(--cr-font-regular);
|
|
55
|
+
line-height: 1.5;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
h6 {
|
|
59
|
+
font-size: 0.75rem; /* 12px */
|
|
60
|
+
font-weight: var(--cr-font-regular);
|
|
61
|
+
line-height: 1.5;
|
|
62
|
+
}
|
package/src/buttons.css
ADDED
|
@@ -0,0 +1,317 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
Credenza Button Components
|
|
3
|
+
========================================================================== */
|
|
4
|
+
|
|
5
|
+
/* -----------------------------------------------------------------------
|
|
6
|
+
Base Button
|
|
7
|
+
----------------------------------------------------------------------- */
|
|
8
|
+
|
|
9
|
+
.cr-btn {
|
|
10
|
+
display: inline-flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
gap: 0.5rem;
|
|
14
|
+
padding: 0.5rem 1.25rem;
|
|
15
|
+
font-family: var(--cr-font-family);
|
|
16
|
+
font-size: 0.875rem;
|
|
17
|
+
font-weight: var(--cr-font-medium);
|
|
18
|
+
line-height: 1.5;
|
|
19
|
+
text-decoration: none;
|
|
20
|
+
border: 1px solid transparent;
|
|
21
|
+
border-radius: 0.25rem;
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
transition: background-color 200ms ease, border-color 200ms ease,
|
|
24
|
+
color 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
|
|
25
|
+
user-select: none;
|
|
26
|
+
white-space: nowrap;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.cr-btn:focus-visible {
|
|
30
|
+
outline: 2px solid var(--cr-color-skol);
|
|
31
|
+
outline-offset: 2px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* -----------------------------------------------------------------------
|
|
35
|
+
Primary Button (dark — Credenza #333)
|
|
36
|
+
States: default → hover → click → disabled → focused
|
|
37
|
+
----------------------------------------------------------------------- */
|
|
38
|
+
|
|
39
|
+
.cr-btn-primary {
|
|
40
|
+
background-color: var(--cr-color-credenza);
|
|
41
|
+
color: var(--cr-color-white);
|
|
42
|
+
border-color: var(--cr-color-credenza);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.cr-btn-primary:hover {
|
|
46
|
+
background-color: var(--cr-color-dark-gray-1);
|
|
47
|
+
border-color: var(--cr-color-dark-gray-1);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.cr-btn-primary:active {
|
|
51
|
+
background-color: #2a2a2a;
|
|
52
|
+
border-color: #2a2a2a;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.cr-btn-primary:disabled,
|
|
56
|
+
.cr-btn-primary.cr-btn-disabled {
|
|
57
|
+
background-color: var(--cr-color-med-gray-1);
|
|
58
|
+
border-color: var(--cr-color-med-gray-1);
|
|
59
|
+
color: var(--cr-color-white);
|
|
60
|
+
cursor: not-allowed;
|
|
61
|
+
opacity: 0.7;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.cr-btn-primary.cr-btn-focused,
|
|
65
|
+
.cr-btn-primary:focus-visible {
|
|
66
|
+
background-color: var(--cr-color-credenza);
|
|
67
|
+
border-color: var(--cr-color-alert);
|
|
68
|
+
box-shadow: 0 0 0 2px var(--cr-color-alert);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* -----------------------------------------------------------------------
|
|
72
|
+
Outline Button
|
|
73
|
+
----------------------------------------------------------------------- */
|
|
74
|
+
|
|
75
|
+
.cr-btn-outline {
|
|
76
|
+
background-color: transparent;
|
|
77
|
+
color: var(--cr-color-credenza);
|
|
78
|
+
border-color: var(--cr-color-credenza);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.cr-btn-outline:hover {
|
|
82
|
+
background-color: var(--cr-color-credenza);
|
|
83
|
+
color: var(--cr-color-white);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.cr-btn-outline:active {
|
|
87
|
+
background-color: var(--cr-color-dark-gray-1);
|
|
88
|
+
color: var(--cr-color-white);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.cr-btn-outline:disabled,
|
|
92
|
+
.cr-btn-outline.cr-btn-disabled {
|
|
93
|
+
border-color: var(--cr-color-med-gray-1);
|
|
94
|
+
color: var(--cr-color-med-gray-1);
|
|
95
|
+
cursor: not-allowed;
|
|
96
|
+
opacity: 0.7;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/* -----------------------------------------------------------------------
|
|
100
|
+
Status / Semantic Buttons
|
|
101
|
+
----------------------------------------------------------------------- */
|
|
102
|
+
|
|
103
|
+
/* Success */
|
|
104
|
+
.cr-btn-success {
|
|
105
|
+
background-color: var(--cr-color-success);
|
|
106
|
+
color: var(--cr-color-white);
|
|
107
|
+
border-color: var(--cr-color-success);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.cr-btn-success:hover {
|
|
111
|
+
background-color: #43a047;
|
|
112
|
+
border-color: #43a047;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.cr-btn-success:active {
|
|
116
|
+
background-color: #388e3c;
|
|
117
|
+
border-color: #388e3c;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* Info */
|
|
121
|
+
.cr-btn-info {
|
|
122
|
+
background-color: var(--cr-color-info);
|
|
123
|
+
color: var(--cr-color-white);
|
|
124
|
+
border-color: var(--cr-color-info);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.cr-btn-info:hover {
|
|
128
|
+
background-color: #8e24aa;
|
|
129
|
+
border-color: #8e24aa;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.cr-btn-info:active {
|
|
133
|
+
background-color: #7b1fa2;
|
|
134
|
+
border-color: #7b1fa2;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* Warning */
|
|
138
|
+
.cr-btn-warning {
|
|
139
|
+
background-color: var(--cr-color-warning);
|
|
140
|
+
color: var(--cr-color-white);
|
|
141
|
+
border-color: var(--cr-color-warning);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.cr-btn-warning:hover {
|
|
145
|
+
background-color: #fb8c00;
|
|
146
|
+
border-color: #fb8c00;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.cr-btn-warning:active {
|
|
150
|
+
background-color: #f57c00;
|
|
151
|
+
border-color: #f57c00;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
/* Alert */
|
|
155
|
+
.cr-btn-alert {
|
|
156
|
+
background-color: var(--cr-color-alert);
|
|
157
|
+
color: var(--cr-color-white);
|
|
158
|
+
border-color: var(--cr-color-alert);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.cr-btn-alert:hover {
|
|
162
|
+
background-color: #e53935;
|
|
163
|
+
border-color: #e53935;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.cr-btn-alert:active {
|
|
167
|
+
background-color: #d32f2f;
|
|
168
|
+
border-color: #d32f2f;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
/* Link-style button */
|
|
172
|
+
.cr-btn-link {
|
|
173
|
+
background-color: transparent;
|
|
174
|
+
color: var(--cr-color-link);
|
|
175
|
+
border-color: transparent;
|
|
176
|
+
padding-left: 0;
|
|
177
|
+
padding-right: 0;
|
|
178
|
+
text-decoration: none;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.cr-btn-link:hover {
|
|
182
|
+
text-decoration: underline;
|
|
183
|
+
color: #c2185b;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.cr-btn-link:active {
|
|
187
|
+
color: #ad1457;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
/* -----------------------------------------------------------------------
|
|
191
|
+
Login / Social Buttons
|
|
192
|
+
----------------------------------------------------------------------- */
|
|
193
|
+
|
|
194
|
+
.cr-btn-login {
|
|
195
|
+
display: inline-flex;
|
|
196
|
+
align-items: center;
|
|
197
|
+
gap: 0.75rem;
|
|
198
|
+
width: 100%;
|
|
199
|
+
padding: 0.625rem 1rem;
|
|
200
|
+
font-family: var(--cr-font-family);
|
|
201
|
+
font-size: 0.875rem;
|
|
202
|
+
font-weight: var(--cr-font-regular);
|
|
203
|
+
line-height: 1.5;
|
|
204
|
+
color: var(--cr-color-credenza);
|
|
205
|
+
background-color: var(--cr-color-white);
|
|
206
|
+
border: 1px solid var(--cr-color-lite-gray-1);
|
|
207
|
+
border-radius: 0.375rem;
|
|
208
|
+
cursor: pointer;
|
|
209
|
+
transition: background-color 200ms ease, border-color 200ms ease;
|
|
210
|
+
text-decoration: none;
|
|
211
|
+
white-space: nowrap;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.cr-btn-login:hover {
|
|
215
|
+
background-color: var(--cr-color-gray);
|
|
216
|
+
border-color: var(--cr-color-med-gray-2);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.cr-btn-login:active {
|
|
220
|
+
background-color: var(--cr-color-lite-gray-1);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.cr-btn-login:focus-visible {
|
|
224
|
+
outline: 2px solid var(--cr-color-skol);
|
|
225
|
+
outline-offset: 2px;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.cr-btn-login-icon {
|
|
229
|
+
flex-shrink: 0;
|
|
230
|
+
width: 1.25rem;
|
|
231
|
+
height: 1.25rem;
|
|
232
|
+
object-fit: contain;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
/* Icon-only variant (square button with just the logo) */
|
|
236
|
+
.cr-btn-login-icon-only {
|
|
237
|
+
display: inline-flex;
|
|
238
|
+
align-items: center;
|
|
239
|
+
justify-content: center;
|
|
240
|
+
width: 2.5rem;
|
|
241
|
+
height: 2.5rem;
|
|
242
|
+
padding: 0.5rem;
|
|
243
|
+
background-color: var(--cr-color-white);
|
|
244
|
+
border: 1px solid var(--cr-color-lite-gray-1);
|
|
245
|
+
border-radius: 0.375rem;
|
|
246
|
+
cursor: pointer;
|
|
247
|
+
transition: background-color 200ms ease, border-color 200ms ease;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.cr-btn-login-icon-only:hover {
|
|
251
|
+
background-color: var(--cr-color-gray);
|
|
252
|
+
border-color: var(--cr-color-med-gray-2);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
/* -----------------------------------------------------------------------
|
|
256
|
+
Button Sizes
|
|
257
|
+
----------------------------------------------------------------------- */
|
|
258
|
+
|
|
259
|
+
.cr-btn-sm {
|
|
260
|
+
padding: 0.25rem 0.75rem;
|
|
261
|
+
font-size: 0.75rem;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.cr-btn-lg {
|
|
265
|
+
padding: 0.75rem 1.75rem;
|
|
266
|
+
font-size: 1rem;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
/* -----------------------------------------------------------------------
|
|
270
|
+
Button with icon
|
|
271
|
+
----------------------------------------------------------------------- */
|
|
272
|
+
|
|
273
|
+
.cr-btn-icon {
|
|
274
|
+
display: inline-flex;
|
|
275
|
+
align-items: center;
|
|
276
|
+
gap: 0.5rem;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.cr-btn-icon svg,
|
|
280
|
+
.cr-btn-icon img {
|
|
281
|
+
width: 1em;
|
|
282
|
+
height: 1em;
|
|
283
|
+
flex-shrink: 0;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
/* -----------------------------------------------------------------------
|
|
287
|
+
Open-in-app style buttons (Gmail / Outlook from style guide)
|
|
288
|
+
----------------------------------------------------------------------- */
|
|
289
|
+
|
|
290
|
+
.cr-btn-app {
|
|
291
|
+
display: inline-flex;
|
|
292
|
+
align-items: center;
|
|
293
|
+
gap: 0.5rem;
|
|
294
|
+
padding: 0.5rem 1rem;
|
|
295
|
+
font-family: var(--cr-font-family);
|
|
296
|
+
font-size: 0.875rem;
|
|
297
|
+
font-weight: var(--cr-font-regular);
|
|
298
|
+
color: var(--cr-color-credenza);
|
|
299
|
+
background-color: var(--cr-color-white);
|
|
300
|
+
border: 1px solid var(--cr-color-lite-gray-1);
|
|
301
|
+
border-radius: 0.25rem;
|
|
302
|
+
cursor: pointer;
|
|
303
|
+
transition: background-color 200ms ease, border-color 200ms ease;
|
|
304
|
+
text-decoration: none;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.cr-btn-app:hover {
|
|
308
|
+
background-color: var(--cr-color-gray);
|
|
309
|
+
border-color: var(--cr-color-med-gray-2);
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.cr-btn-app-icon {
|
|
313
|
+
flex-shrink: 0;
|
|
314
|
+
width: 1.125rem;
|
|
315
|
+
height: 1.125rem;
|
|
316
|
+
object-fit: contain;
|
|
317
|
+
}
|
package/src/controls.css
ADDED
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
Credenza Controls — Toggle, Avatar, Steps
|
|
3
|
+
========================================================================== */
|
|
4
|
+
|
|
5
|
+
/* -----------------------------------------------------------------------
|
|
6
|
+
Toggle Switch
|
|
7
|
+
----------------------------------------------------------------------- */
|
|
8
|
+
|
|
9
|
+
.cr-toggle {
|
|
10
|
+
position: relative;
|
|
11
|
+
display: inline-flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
gap: 0.5rem;
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
user-select: none;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.cr-toggle-input {
|
|
19
|
+
position: absolute;
|
|
20
|
+
width: 0;
|
|
21
|
+
height: 0;
|
|
22
|
+
opacity: 0;
|
|
23
|
+
pointer-events: none;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.cr-toggle-track {
|
|
27
|
+
position: relative;
|
|
28
|
+
width: 2.5rem;
|
|
29
|
+
height: 1.375rem;
|
|
30
|
+
background-color: var(--cr-color-lite-gray-1);
|
|
31
|
+
border-radius: 9999px;
|
|
32
|
+
transition: background-color 200ms ease;
|
|
33
|
+
flex-shrink: 0;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.cr-toggle-track::after {
|
|
37
|
+
content: "";
|
|
38
|
+
position: absolute;
|
|
39
|
+
top: 0.125rem;
|
|
40
|
+
left: 0.125rem;
|
|
41
|
+
width: 1.125rem;
|
|
42
|
+
height: 1.125rem;
|
|
43
|
+
background-color: var(--cr-color-white);
|
|
44
|
+
border-radius: 9999px;
|
|
45
|
+
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.15);
|
|
46
|
+
transition: transform 200ms ease;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Checked state */
|
|
50
|
+
.cr-toggle-input:checked + .cr-toggle-track {
|
|
51
|
+
background-color: var(--cr-color-skol);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.cr-toggle-input:checked + .cr-toggle-track::after {
|
|
55
|
+
transform: translateX(1.125rem);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Focus-visible */
|
|
59
|
+
.cr-toggle-input:focus-visible + .cr-toggle-track {
|
|
60
|
+
outline: 2px solid var(--cr-color-skol);
|
|
61
|
+
outline-offset: 2px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* Disabled */
|
|
65
|
+
.cr-toggle-input:disabled + .cr-toggle-track {
|
|
66
|
+
opacity: 0.5;
|
|
67
|
+
cursor: not-allowed;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.cr-toggle-input:disabled ~ .cr-toggle-label {
|
|
71
|
+
opacity: 0.5;
|
|
72
|
+
cursor: not-allowed;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* Toggle label text */
|
|
76
|
+
.cr-toggle-label {
|
|
77
|
+
font-family: var(--cr-font-family);
|
|
78
|
+
font-size: 0.875rem;
|
|
79
|
+
font-weight: var(--cr-font-regular);
|
|
80
|
+
line-height: 1.5;
|
|
81
|
+
color: var(--cr-color-credenza);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* Off / On label helper */
|
|
85
|
+
.cr-toggle-label-off,
|
|
86
|
+
.cr-toggle-label-on {
|
|
87
|
+
font-family: var(--cr-font-family);
|
|
88
|
+
font-size: 0.75rem;
|
|
89
|
+
font-weight: var(--cr-font-regular);
|
|
90
|
+
color: var(--cr-color-digital);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.cr-toggle-label-on {
|
|
94
|
+
color: var(--cr-color-skol);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* -----------------------------------------------------------------------
|
|
98
|
+
Avatars
|
|
99
|
+
----------------------------------------------------------------------- */
|
|
100
|
+
|
|
101
|
+
.cr-avatar {
|
|
102
|
+
display: inline-flex;
|
|
103
|
+
align-items: center;
|
|
104
|
+
justify-content: center;
|
|
105
|
+
border-radius: 9999px;
|
|
106
|
+
overflow: hidden;
|
|
107
|
+
background-color: var(--cr-color-gray);
|
|
108
|
+
color: var(--cr-color-credenza);
|
|
109
|
+
font-family: var(--cr-font-family);
|
|
110
|
+
font-weight: var(--cr-font-medium);
|
|
111
|
+
user-select: none;
|
|
112
|
+
flex-shrink: 0;
|
|
113
|
+
vertical-align: middle;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.cr-avatar img {
|
|
117
|
+
width: 100%;
|
|
118
|
+
height: 100%;
|
|
119
|
+
object-fit: cover;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* Sizes */
|
|
123
|
+
.cr-avatar-xs {
|
|
124
|
+
width: 1.25rem;
|
|
125
|
+
height: 1.25rem;
|
|
126
|
+
font-size: 0.5rem;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.cr-avatar-sm {
|
|
130
|
+
width: 1.75rem;
|
|
131
|
+
height: 1.75rem;
|
|
132
|
+
font-size: 0.625rem;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.cr-avatar-md {
|
|
136
|
+
width: 2.25rem;
|
|
137
|
+
height: 2.25rem;
|
|
138
|
+
font-size: 0.75rem;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.cr-avatar-lg {
|
|
142
|
+
width: 3rem;
|
|
143
|
+
height: 3rem;
|
|
144
|
+
font-size: 1rem;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.cr-avatar-xl {
|
|
148
|
+
width: 4rem;
|
|
149
|
+
height: 4rem;
|
|
150
|
+
font-size: 1.25rem;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/* Avatar with border (e.g. status ring) */
|
|
154
|
+
.cr-avatar-ring {
|
|
155
|
+
box-shadow: 0 0 0 2px var(--cr-color-white), 0 0 0 4px var(--cr-color-skol);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* Avatar group (overlapping) */
|
|
159
|
+
.cr-avatar-group {
|
|
160
|
+
display: inline-flex;
|
|
161
|
+
flex-direction: row-reverse;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.cr-avatar-group .cr-avatar {
|
|
165
|
+
margin-left: -0.5rem;
|
|
166
|
+
box-shadow: 0 0 0 2px var(--cr-color-white);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.cr-avatar-group .cr-avatar:last-child {
|
|
170
|
+
margin-left: 0;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/* Initials inside avatar */
|
|
174
|
+
.cr-avatar-initials {
|
|
175
|
+
display: flex;
|
|
176
|
+
align-items: center;
|
|
177
|
+
justify-content: center;
|
|
178
|
+
width: 100%;
|
|
179
|
+
height: 100%;
|
|
180
|
+
text-transform: uppercase;
|
|
181
|
+
letter-spacing: 0.025em;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
/* Status indicator dot on avatar */
|
|
185
|
+
.cr-avatar-status {
|
|
186
|
+
position: relative;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.cr-avatar-status::after {
|
|
190
|
+
content: "";
|
|
191
|
+
position: absolute;
|
|
192
|
+
bottom: 0;
|
|
193
|
+
right: 0;
|
|
194
|
+
width: 25%;
|
|
195
|
+
height: 25%;
|
|
196
|
+
min-width: 0.375rem;
|
|
197
|
+
min-height: 0.375rem;
|
|
198
|
+
border-radius: 9999px;
|
|
199
|
+
background-color: var(--cr-color-success);
|
|
200
|
+
box-shadow: 0 0 0 2px var(--cr-color-white);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.cr-avatar-status-offline::after {
|
|
204
|
+
background-color: var(--cr-color-med-gray-1);
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.cr-avatar-status-busy::after {
|
|
208
|
+
background-color: var(--cr-color-alert);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
/* -----------------------------------------------------------------------
|
|
212
|
+
Steps / Stepper
|
|
213
|
+
----------------------------------------------------------------------- */
|
|
214
|
+
|
|
215
|
+
.cr-steps {
|
|
216
|
+
display: flex;
|
|
217
|
+
align-items: center;
|
|
218
|
+
gap: 0;
|
|
219
|
+
font-family: var(--cr-font-family);
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.cr-step {
|
|
223
|
+
display: flex;
|
|
224
|
+
align-items: center;
|
|
225
|
+
gap: 0.5rem;
|
|
226
|
+
position: relative;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.cr-step-indicator {
|
|
230
|
+
display: inline-flex;
|
|
231
|
+
align-items: center;
|
|
232
|
+
justify-content: center;
|
|
233
|
+
width: 1.5rem;
|
|
234
|
+
height: 1.5rem;
|
|
235
|
+
border-radius: 9999px;
|
|
236
|
+
font-size: 0.75rem;
|
|
237
|
+
font-weight: var(--cr-font-medium);
|
|
238
|
+
line-height: 1;
|
|
239
|
+
flex-shrink: 0;
|
|
240
|
+
border: 2px solid var(--cr-color-lite-gray-1);
|
|
241
|
+
background-color: var(--cr-color-white);
|
|
242
|
+
color: var(--cr-color-digital);
|
|
243
|
+
transition: background-color 200ms ease, border-color 200ms ease,
|
|
244
|
+
color 200ms ease;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.cr-step-label {
|
|
248
|
+
font-size: 0.75rem;
|
|
249
|
+
font-weight: var(--cr-font-regular);
|
|
250
|
+
color: var(--cr-color-digital);
|
|
251
|
+
transition: color 200ms ease;
|
|
252
|
+
white-space: nowrap;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
/* Connector line between steps */
|
|
256
|
+
.cr-step-connector {
|
|
257
|
+
flex: 1;
|
|
258
|
+
height: 2px;
|
|
259
|
+
min-width: 1.5rem;
|
|
260
|
+
background-color: var(--cr-color-lite-gray-1);
|
|
261
|
+
transition: background-color 200ms ease;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
/* Active step */
|
|
265
|
+
.cr-step-active .cr-step-indicator {
|
|
266
|
+
background-color: var(--cr-color-skol);
|
|
267
|
+
border-color: var(--cr-color-skol);
|
|
268
|
+
color: var(--cr-color-white);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.cr-step-active .cr-step-label {
|
|
272
|
+
color: var(--cr-color-credenza);
|
|
273
|
+
font-weight: var(--cr-font-medium);
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
/* Completed step */
|
|
277
|
+
.cr-step-completed .cr-step-indicator {
|
|
278
|
+
background-color: var(--cr-color-skol);
|
|
279
|
+
border-color: var(--cr-color-skol);
|
|
280
|
+
color: var(--cr-color-white);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.cr-step-completed .cr-step-label {
|
|
284
|
+
color: var(--cr-color-credenza);
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.cr-step-completed + .cr-step-connector {
|
|
288
|
+
background-color: var(--cr-color-skol);
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
/* Dot-style steps (small dots instead of numbered circles) */
|
|
292
|
+
.cr-step-dot .cr-step-indicator {
|
|
293
|
+
width: 0.5rem;
|
|
294
|
+
height: 0.5rem;
|
|
295
|
+
min-width: 0.5rem;
|
|
296
|
+
font-size: 0;
|
|
297
|
+
border-width: 0;
|
|
298
|
+
background-color: var(--cr-color-lite-gray-1);
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.cr-step-dot.cr-step-active .cr-step-indicator {
|
|
302
|
+
background-color: var(--cr-color-skol);
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.cr-step-dot.cr-step-completed .cr-step-indicator {
|
|
306
|
+
background-color: var(--cr-color-skol);
|
|
307
|
+
}
|
package/src/index.css
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
Credenza Styling — Main Entry Point
|
|
3
|
+
Import this file to get all Credenza design tokens & component styles.
|
|
4
|
+
|
|
5
|
+
Usage:
|
|
6
|
+
@import "credenza-styling";
|
|
7
|
+
or
|
|
8
|
+
@import "credenza-styling/src/index.css";
|
|
9
|
+
========================================================================== */
|
|
10
|
+
|
|
11
|
+
/* Design tokens (CSS custom properties) */
|
|
12
|
+
@import "./variables.css";
|
|
13
|
+
|
|
14
|
+
/* Base styles — Poppins font import & heading defaults */
|
|
15
|
+
@import "./base.css";
|
|
16
|
+
|
|
17
|
+
/* Component styles */
|
|
18
|
+
@import "./buttons.css";
|
|
19
|
+
@import "./badges.css";
|
|
20
|
+
@import "./controls.css";
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
Credenza Design Tokens (CSS Custom Properties)
|
|
3
|
+
========================================================================== */
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
/* -----------------------------------------------------------------------
|
|
7
|
+
COLOR PALETTE — Primary
|
|
8
|
+
----------------------------------------------------------------------- */
|
|
9
|
+
--cr-color-credenza: #333333;
|
|
10
|
+
--cr-color-digital: #707070;
|
|
11
|
+
--cr-color-the-lake-show: #acf7ea;
|
|
12
|
+
--cr-color-skol: #731b98;
|
|
13
|
+
|
|
14
|
+
/* -----------------------------------------------------------------------
|
|
15
|
+
COLOR PALETTE — Secondary
|
|
16
|
+
----------------------------------------------------------------------- */
|
|
17
|
+
--cr-color-irish: #e0f4eb;
|
|
18
|
+
--cr-color-oriole: #ffdec1;
|
|
19
|
+
--cr-color-rose: #ffd5d3;
|
|
20
|
+
--cr-color-triple-crown: #efe6ff;
|
|
21
|
+
|
|
22
|
+
/* -----------------------------------------------------------------------
|
|
23
|
+
COLOR PALETTE — Grayscale
|
|
24
|
+
----------------------------------------------------------------------- */
|
|
25
|
+
--cr-color-white: #ffffff;
|
|
26
|
+
--cr-color-gray: #eeeeee;
|
|
27
|
+
--cr-color-lite-gray-1: #dddddd;
|
|
28
|
+
--cr-color-med-gray-2: #bbbbbb;
|
|
29
|
+
--cr-color-med-gray-1: #888888;
|
|
30
|
+
--cr-color-dark-gray-1: #454545;
|
|
31
|
+
|
|
32
|
+
/* -----------------------------------------------------------------------
|
|
33
|
+
COLOR PALETTE — Semantic / Status
|
|
34
|
+
----------------------------------------------------------------------- */
|
|
35
|
+
--cr-color-success: #4caf50;
|
|
36
|
+
--cr-color-info: #9c27b0;
|
|
37
|
+
--cr-color-warning: #ff9800;
|
|
38
|
+
--cr-color-alert: #f44336;
|
|
39
|
+
--cr-color-link: #e91e63;
|
|
40
|
+
|
|
41
|
+
/* -----------------------------------------------------------------------
|
|
42
|
+
TYPOGRAPHY
|
|
43
|
+
----------------------------------------------------------------------- */
|
|
44
|
+
--cr-font-family: "Poppins", sans-serif;
|
|
45
|
+
|
|
46
|
+
--cr-font-extralight: 200;
|
|
47
|
+
--cr-font-light: 300;
|
|
48
|
+
--cr-font-regular: 400;
|
|
49
|
+
--cr-font-medium: 500;
|
|
50
|
+
--cr-font-bold: 700;
|
|
51
|
+
--cr-font-black: 900;
|
|
52
|
+
}
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Credenza Tailwind CSS Preset
|
|
3
|
+
*
|
|
4
|
+
* Extends Tailwind with the Credenza design system tokens
|
|
5
|
+
* from the style guide (colors, typography, font weights).
|
|
6
|
+
*
|
|
7
|
+
* Usage in your tailwind.config.js:
|
|
8
|
+
*
|
|
9
|
+
* const credenzaPreset = require('credenza-styling/tailwind-preset');
|
|
10
|
+
*
|
|
11
|
+
* module.exports = {
|
|
12
|
+
* presets: [credenzaPreset],
|
|
13
|
+
* // ... rest of your config
|
|
14
|
+
* };
|
|
15
|
+
*
|
|
16
|
+
* This gives you classes like:
|
|
17
|
+
* bg-credenza, text-skol, font-poppins, text-h1, font-extralight, etc.
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
module.exports = {
|
|
21
|
+
theme: {
|
|
22
|
+
extend: {
|
|
23
|
+
/* -----------------------------------------------------------------
|
|
24
|
+
Colors — from the Credenza style guide color palette
|
|
25
|
+
----------------------------------------------------------------- */
|
|
26
|
+
colors: {
|
|
27
|
+
/* Primary */
|
|
28
|
+
credenza: "#333333",
|
|
29
|
+
digital: "#707070",
|
|
30
|
+
"the-lake-show": "#acf7ea",
|
|
31
|
+
skol: "#731b98",
|
|
32
|
+
|
|
33
|
+
/* Secondary */
|
|
34
|
+
irish: "#e0f4eb",
|
|
35
|
+
oriole: "#ffdec1",
|
|
36
|
+
rose: "#ffd5d3",
|
|
37
|
+
"triple-crown": "#efe6ff",
|
|
38
|
+
|
|
39
|
+
/* Grayscale */
|
|
40
|
+
"cr-white": "#ffffff",
|
|
41
|
+
"cr-gray": "#eeeeee",
|
|
42
|
+
"lite-gray-1": "#dddddd",
|
|
43
|
+
"med-gray-2": "#bbbbbb",
|
|
44
|
+
"med-gray-1": "#888888",
|
|
45
|
+
"dark-gray-1": "#454545",
|
|
46
|
+
|
|
47
|
+
/* Semantic / Status */
|
|
48
|
+
"cr-success": "#4caf50",
|
|
49
|
+
"cr-info": "#9c27b0",
|
|
50
|
+
"cr-warning": "#ff9800",
|
|
51
|
+
"cr-alert": "#f44336",
|
|
52
|
+
"cr-link": "#e91e63",
|
|
53
|
+
},
|
|
54
|
+
|
|
55
|
+
/* -----------------------------------------------------------------
|
|
56
|
+
Font Family — Poppins
|
|
57
|
+
----------------------------------------------------------------- */
|
|
58
|
+
fontFamily: {
|
|
59
|
+
poppins: ['"Poppins"', "sans-serif"],
|
|
60
|
+
},
|
|
61
|
+
|
|
62
|
+
/* -----------------------------------------------------------------
|
|
63
|
+
Font Weight — matches all Poppins weights in the style guide
|
|
64
|
+
----------------------------------------------------------------- */
|
|
65
|
+
fontWeight: {
|
|
66
|
+
extralight: "200",
|
|
67
|
+
light: "300",
|
|
68
|
+
regular: "400",
|
|
69
|
+
medium: "500",
|
|
70
|
+
bold: "700",
|
|
71
|
+
black: "900",
|
|
72
|
+
},
|
|
73
|
+
|
|
74
|
+
/* -----------------------------------------------------------------
|
|
75
|
+
Font Size — heading scale from the style guide
|
|
76
|
+
H1: Regular 30px
|
|
77
|
+
H2: Light 24px
|
|
78
|
+
H3: Medium 18px
|
|
79
|
+
H4: Regular 16px
|
|
80
|
+
H5: Regular 14px
|
|
81
|
+
H6: Regular 12px
|
|
82
|
+
----------------------------------------------------------------- */
|
|
83
|
+
fontSize: {
|
|
84
|
+
h1: [
|
|
85
|
+
"1.875rem",
|
|
86
|
+
{ lineHeight: "1.25", fontWeight: "400" },
|
|
87
|
+
],
|
|
88
|
+
h2: [
|
|
89
|
+
"1.5rem",
|
|
90
|
+
{ lineHeight: "1.25", fontWeight: "300" },
|
|
91
|
+
],
|
|
92
|
+
h3: [
|
|
93
|
+
"1.125rem",
|
|
94
|
+
{ lineHeight: "1.375", fontWeight: "500" },
|
|
95
|
+
],
|
|
96
|
+
h4: [
|
|
97
|
+
"1rem",
|
|
98
|
+
{ lineHeight: "1.375", fontWeight: "400" },
|
|
99
|
+
],
|
|
100
|
+
h5: [
|
|
101
|
+
"0.875rem",
|
|
102
|
+
{ lineHeight: "1.5", fontWeight: "400" },
|
|
103
|
+
],
|
|
104
|
+
h6: [
|
|
105
|
+
"0.75rem",
|
|
106
|
+
{ lineHeight: "1.5", fontWeight: "400" },
|
|
107
|
+
],
|
|
108
|
+
},
|
|
109
|
+
|
|
110
|
+
/* -----------------------------------------------------------------
|
|
111
|
+
Border Radius — adds a pill utility
|
|
112
|
+
----------------------------------------------------------------- */
|
|
113
|
+
borderRadius: {
|
|
114
|
+
pill: "9999px",
|
|
115
|
+
},
|
|
116
|
+
|
|
117
|
+
/* -----------------------------------------------------------------
|
|
118
|
+
Box Shadow — Credenza focus ring
|
|
119
|
+
----------------------------------------------------------------- */
|
|
120
|
+
boxShadow: {
|
|
121
|
+
"cr-focus": "0 0 0 2px #731b98",
|
|
122
|
+
"cr-focus-alert": "0 0 0 2px #f44336",
|
|
123
|
+
},
|
|
124
|
+
|
|
125
|
+
/* -----------------------------------------------------------------
|
|
126
|
+
Ring Color
|
|
127
|
+
----------------------------------------------------------------- */
|
|
128
|
+
ringColor: {
|
|
129
|
+
skol: "#731b98",
|
|
130
|
+
"cr-alert": "#f44336",
|
|
131
|
+
"cr-success": "#4caf50",
|
|
132
|
+
},
|
|
133
|
+
},
|
|
134
|
+
},
|
|
135
|
+
};
|