bizz-components 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/README.md +249 -0
- package/fesm2022/bizz-components.mjs +222 -0
- package/fesm2022/bizz-components.mjs.map +1 -0
- package/index.d.ts +100 -0
- package/package.json +36 -0
- package/src/lib/themes/primitives.css +78 -0
- package/src/lib/themes/theme-dark.css +117 -0
- package/src/lib/themes/theme-light.css +117 -0
- package/src/lib/tokens/tokens.css +85 -0
- package/src/lib/tokens/typography.css +105 -0
package/README.md
ADDED
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
# Bizz Components
|
|
2
|
+
|
|
3
|
+
An Angular component library built as part of the Bizz Design System. Includes fully themed UI components, design tokens, and Web Components (Angular Elements) support.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install bizz-components
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### Peer dependencies
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install @angular/core @angular/common
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Setup
|
|
22
|
+
|
|
23
|
+
### 1. Add the global styles
|
|
24
|
+
|
|
25
|
+
In your project's `angular.json`, add the base tokens and typography to the `styles` array:
|
|
26
|
+
|
|
27
|
+
```json
|
|
28
|
+
"styles": [
|
|
29
|
+
"node_modules/bizz-components/tokens.css",
|
|
30
|
+
"node_modules/bizz-components/typography.css"
|
|
31
|
+
]
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### 2. Add the font
|
|
35
|
+
|
|
36
|
+
In your `index.html`:
|
|
37
|
+
|
|
38
|
+
```html
|
|
39
|
+
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## Theming
|
|
45
|
+
|
|
46
|
+
Apply a theme class to your root element:
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<html class="bizz-theme-light"> <!-- default -->
|
|
50
|
+
<html class="bizz-theme-dark"> <!-- dark mode -->
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Customize colors
|
|
54
|
+
|
|
55
|
+
Override any of the 5 base colors — all shades regenerate automatically:
|
|
56
|
+
|
|
57
|
+
```css
|
|
58
|
+
:root {
|
|
59
|
+
--bizz-primary: #7c3aed;
|
|
60
|
+
--bizz-secondary: #374151;
|
|
61
|
+
--bizz-success: #059669;
|
|
62
|
+
--bizz-warning: #d97706;
|
|
63
|
+
--bizz-error: #dc2626;
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
## Components
|
|
70
|
+
|
|
71
|
+
### BizzButton
|
|
72
|
+
|
|
73
|
+
```html
|
|
74
|
+
<bizz-button variant="primary" size="md" (clicked)="onClick()">
|
|
75
|
+
Click me
|
|
76
|
+
</bizz-button>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
| Input | Type | Default | Description |
|
|
80
|
+
|---|---|---|---|
|
|
81
|
+
| `variant` | `primary \| secondary \| disabled \| danger` | `primary` | Visual style |
|
|
82
|
+
| `size` | `sm \| md \| lg` | `md` | Button size |
|
|
83
|
+
| `disabled` | `boolean` | `false` | Disables the button |
|
|
84
|
+
| `loading` | `boolean` | `false` | Shows spinner, blocks clicks |
|
|
85
|
+
| `fullWidth` | `boolean` | `false` | Stretches to container width |
|
|
86
|
+
|
|
87
|
+
| Output | Description |
|
|
88
|
+
|---|---|
|
|
89
|
+
| `clicked` | Emits `MouseEvent` on click |
|
|
90
|
+
|
|
91
|
+
---
|
|
92
|
+
|
|
93
|
+
### BizzCard
|
|
94
|
+
|
|
95
|
+
```html
|
|
96
|
+
<bizz-card elevation="raised" [clickable]="true">
|
|
97
|
+
<div card-media><img src="..." /></div>
|
|
98
|
+
<div card-header>
|
|
99
|
+
<h4 class="bizz-h4">Title</h4>
|
|
100
|
+
</div>
|
|
101
|
+
Body content goes here
|
|
102
|
+
<div card-footer>Footer actions</div>
|
|
103
|
+
</bizz-card>
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
| Input | Type | Default | Description |
|
|
107
|
+
|---|---|---|---|
|
|
108
|
+
| `elevation` | `flat \| raised` | `raised` | Shadow depth |
|
|
109
|
+
| `padding` | `none \| sm \| md \| lg` | `md` | Inner padding |
|
|
110
|
+
| `clickable` | `boolean` | `false` | Hover lift + focus ring |
|
|
111
|
+
|
|
112
|
+
**Slots:** `[card-media]`, `[card-header]`, default body, `[card-footer]`
|
|
113
|
+
|
|
114
|
+
---
|
|
115
|
+
|
|
116
|
+
### BizzTag
|
|
117
|
+
|
|
118
|
+
```html
|
|
119
|
+
<bizz-tag color="primary" size="md" [dismissible]="true" (dismissed)="remove()">
|
|
120
|
+
Angular
|
|
121
|
+
</bizz-tag>
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
| Input | Type | Default | Description |
|
|
125
|
+
|---|---|---|---|
|
|
126
|
+
| `color` | `primary \| secondary \| success \| warning \| error` | `primary` | Semantic color |
|
|
127
|
+
| `size` | `sm \| md` | `md` | Tag size |
|
|
128
|
+
| `dismissible` | `boolean` | `false` | Shows close button |
|
|
129
|
+
|
|
130
|
+
| Output | Description |
|
|
131
|
+
|---|---|
|
|
132
|
+
| `dismissed` | Emits when close button is clicked |
|
|
133
|
+
|
|
134
|
+
---
|
|
135
|
+
|
|
136
|
+
### BizzInput
|
|
137
|
+
|
|
138
|
+
```html
|
|
139
|
+
<bizz-input
|
|
140
|
+
label="Email"
|
|
141
|
+
placeholder="you@example.com"
|
|
142
|
+
type="email"
|
|
143
|
+
helperText="We'll never share your email."
|
|
144
|
+
[required]="true"
|
|
145
|
+
[(ngModel)]="email"
|
|
146
|
+
/>
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
Implements `ControlValueAccessor` — works with `ngModel` and reactive forms.
|
|
150
|
+
|
|
151
|
+
| Input | Type | Default | Description |
|
|
152
|
+
|---|---|---|---|
|
|
153
|
+
| `label` | `string` | `''` | Field label |
|
|
154
|
+
| `placeholder` | `string` | `''` | Placeholder text |
|
|
155
|
+
| `type` | `text \| email \| password \| number \| tel \| url \| search` | `text` | Input type |
|
|
156
|
+
| `helperText` | `string` | `''` | Helper text below field |
|
|
157
|
+
| `errorText` | `string` | `''` | Error message (shows red border) |
|
|
158
|
+
| `disabled` | `boolean` | `false` | Disables the input |
|
|
159
|
+
| `required` | `boolean` | `false` | Red border on blur if empty |
|
|
160
|
+
|
|
161
|
+
---
|
|
162
|
+
|
|
163
|
+
### BizzTextarea
|
|
164
|
+
|
|
165
|
+
Same API as `BizzInput`, plus:
|
|
166
|
+
|
|
167
|
+
| Input | Type | Default | Description |
|
|
168
|
+
|---|---|---|---|
|
|
169
|
+
| `rows` | `number` | `4` | Initial row count |
|
|
170
|
+
| `autoResize` | `boolean` | `false` | Grows with content |
|
|
171
|
+
|
|
172
|
+
---
|
|
173
|
+
|
|
174
|
+
### BizzTimeline + BizzTimelineItem
|
|
175
|
+
|
|
176
|
+
```html
|
|
177
|
+
<bizz-timeline>
|
|
178
|
+
<bizz-timeline-item
|
|
179
|
+
title="Senior Developer"
|
|
180
|
+
subtitle="Acme Corp · Full-time"
|
|
181
|
+
date="2023 — Present"
|
|
182
|
+
status="active"
|
|
183
|
+
>
|
|
184
|
+
<p class="bizz-body-sm">Description...</p>
|
|
185
|
+
<div timeline-tags>
|
|
186
|
+
<bizz-tag color="primary" size="sm">Angular</bizz-tag>
|
|
187
|
+
</div>
|
|
188
|
+
</bizz-timeline-item>
|
|
189
|
+
</bizz-timeline>
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
| Input | Type | Default | Description |
|
|
193
|
+
|---|---|---|---|
|
|
194
|
+
| `title` | `string` | `''` | Role or event title |
|
|
195
|
+
| `subtitle` | `string` | `''` | Company or secondary info |
|
|
196
|
+
| `date` | `string` | `''` | Date range label |
|
|
197
|
+
| `status` | `active \| completed \| default` | `default` | Dot style |
|
|
198
|
+
|
|
199
|
+
**Slots:** default body, `[timeline-tags]`
|
|
200
|
+
|
|
201
|
+
---
|
|
202
|
+
|
|
203
|
+
## Typography
|
|
204
|
+
|
|
205
|
+
Typography is CSS utility classes — apply to any HTML element:
|
|
206
|
+
|
|
207
|
+
```html
|
|
208
|
+
<h1 class="bizz-h1">Heading 1</h1>
|
|
209
|
+
<h2 class="bizz-h2">Heading 2</h2>
|
|
210
|
+
<h3 class="bizz-h3">Heading 3</h3>
|
|
211
|
+
<h4 class="bizz-h4">Heading 4</h4>
|
|
212
|
+
<p class="bizz-body-lg">Body Large</p>
|
|
213
|
+
<p class="bizz-body">Body</p>
|
|
214
|
+
<p class="bizz-body-sm">Body Small</p>
|
|
215
|
+
<span class="bizz-label">Label</span>
|
|
216
|
+
<span class="bizz-caption">Caption</span>
|
|
217
|
+
<span class="bizz-overline">Overline</span>
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
**Color modifiers:**
|
|
221
|
+
|
|
222
|
+
```html
|
|
223
|
+
<p class="bizz-body bizz-text-primary">Primary</p>
|
|
224
|
+
<p class="bizz-body bizz-text-secondary">Secondary</p>
|
|
225
|
+
<p class="bizz-body bizz-text-brand">Brand</p>
|
|
226
|
+
<p class="bizz-body bizz-text-error">Error</p>
|
|
227
|
+
<p class="bizz-body bizz-text-success">Success</p>
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
---
|
|
231
|
+
|
|
232
|
+
## Building
|
|
233
|
+
|
|
234
|
+
```bash
|
|
235
|
+
ng build bizz-components
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
## Publishing
|
|
239
|
+
|
|
240
|
+
```bash
|
|
241
|
+
cd dist/bizz-components
|
|
242
|
+
npm publish --access public
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
---
|
|
246
|
+
|
|
247
|
+
## License
|
|
248
|
+
|
|
249
|
+
MIT © Beatriz Nascimento
|
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, output, computed, ChangeDetectionStrategy, Component, HostBinding, signal, forwardRef, viewChild } from '@angular/core';
|
|
3
|
+
import { CommonModule } from '@angular/common';
|
|
4
|
+
import { ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
5
|
+
|
|
6
|
+
class BizzButtonComponent {
|
|
7
|
+
variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
8
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
9
|
+
type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
10
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
11
|
+
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
12
|
+
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
13
|
+
clicked = output();
|
|
14
|
+
classes = computed(() => {
|
|
15
|
+
const parts = [
|
|
16
|
+
'bizz-button',
|
|
17
|
+
`bizz-button--${this.variant()}`,
|
|
18
|
+
`bizz-button--${this.size()}`,
|
|
19
|
+
];
|
|
20
|
+
if (this.fullWidth())
|
|
21
|
+
parts.push('bizz-button--full-width');
|
|
22
|
+
if (this.loading())
|
|
23
|
+
parts.push('bizz-button--loading');
|
|
24
|
+
return parts.join(' ');
|
|
25
|
+
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
26
|
+
isDisabled = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
27
|
+
onClick(event) {
|
|
28
|
+
if (!this.isDisabled()) {
|
|
29
|
+
this.clicked.emit(event);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BizzButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
33
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: BizzButtonComponent, isStandalone: true, selector: "bizz-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n [class]=\"classes()\"\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClick($event)\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n>\n @if (loading()) {\n <span class=\"bizz-button__spinner\" aria-hidden=\"true\"></span>\n }\n <span class=\"bizz-button__content\" [class.bizz-button__content--hidden]=\"loading()\">\n <ng-content />\n </span>\n</button>\n", styles: [".bizz-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--bizz-spacing-03);position:relative;border:2px solid transparent;border-radius:var(--bizz-radius-md);font-family:var(--bizz-font-family-base);font-weight:var(--bizz-font-weight-semibold);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color var(--bizz-duration-base) var(--bizz-easing-default),border-color var(--bizz-duration-base) var(--bizz-easing-default),color var(--bizz-duration-base) var(--bizz-easing-default),box-shadow var(--bizz-duration-base) var(--bizz-easing-default),transform var(--bizz-duration-fast) var(--bizz-easing-default);-webkit-user-select:none;user-select:none;outline:none}.bizz-button:focus-visible{box-shadow:0 0 0 3px var(--bizz-focus)}.bizz-button:active:not(:disabled){transform:translateY(1px)}.bizz-button--sm{height:2rem;padding:0 var(--bizz-spacing-04);font-size:var(--bizz-font-size-sm);border-radius:var(--bizz-radius-sm)}.bizz-button--md{height:2.5rem;padding:0 var(--bizz-spacing-05);font-size:var(--bizz-font-size-md)}.bizz-button--lg{height:3rem;padding:0 var(--bizz-spacing-06);font-size:var(--bizz-font-size-lg);border-radius:var(--bizz-radius-lg)}.bizz-button--primary{background-color:var(--bizz-button-primary);border-color:var(--bizz-button-primary);color:var(--bizz-text-on-color)}.bizz-button--primary:hover:not(:disabled){background-color:var(--bizz-button-primary-hover);border-color:var(--bizz-button-primary-hover);box-shadow:var(--bizz-shadow-md)}.bizz-button--primary:active:not(:disabled){background-color:var(--bizz-button-primary-active);border-color:var(--bizz-button-primary-active)}.bizz-button--secondary{background-color:transparent;border-color:var(--bizz-button-secondary);color:var(--bizz-button-secondary)}.bizz-button--secondary:hover:not(:disabled){background-color:var(--bizz-background-hover);border-color:var(--bizz-button-secondary-hover);color:var(--bizz-button-secondary-hover);box-shadow:var(--bizz-shadow-sm)}.bizz-button--secondary:active:not(:disabled){background-color:var(--bizz-background-active);border-color:var(--bizz-button-secondary-active);color:var(--bizz-button-secondary-active)}.bizz-button--disabled{background-color:transparent;border-color:transparent;color:var(--bizz-text-secondary)}.bizz-button--disabled:hover:not(:disabled){background-color:var(--bizz-background-hover);color:var(--bizz-text-primary)}.bizz-button--disabled:active:not(:disabled){background-color:var(--bizz-background-active)}.bizz-button--danger{background-color:var(--bizz-button-danger);border-color:var(--bizz-button-danger);color:var(--bizz-text-on-color)}.bizz-button--danger:hover:not(:disabled){background-color:var(--bizz-button-danger-hover);border-color:var(--bizz-button-danger-hover);box-shadow:var(--bizz-shadow-md)}.bizz-button--danger:active:not(:disabled){background-color:var(--bizz-button-danger-active);border-color:var(--bizz-button-danger-active)}.bizz-button:disabled{background-color:var(--bizz-button-disabled);border-color:var(--bizz-button-disabled);color:var(--bizz-text-on-color-disabled);cursor:not-allowed;transform:none;box-shadow:none}.bizz-button--full-width{width:100%}.bizz-button--loading{cursor:wait}.bizz-button__content--hidden{opacity:0}.bizz-button__spinner{position:absolute;width:1em;height:1em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:bizz-spin .6s linear infinite}@keyframes bizz-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
34
|
+
}
|
|
35
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BizzButtonComponent, decorators: [{
|
|
36
|
+
type: Component,
|
|
37
|
+
args: [{ selector: 'bizz-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n [class]=\"classes()\"\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClick($event)\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n>\n @if (loading()) {\n <span class=\"bizz-button__spinner\" aria-hidden=\"true\"></span>\n }\n <span class=\"bizz-button__content\" [class.bizz-button__content--hidden]=\"loading()\">\n <ng-content />\n </span>\n</button>\n", styles: [".bizz-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--bizz-spacing-03);position:relative;border:2px solid transparent;border-radius:var(--bizz-radius-md);font-family:var(--bizz-font-family-base);font-weight:var(--bizz-font-weight-semibold);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color var(--bizz-duration-base) var(--bizz-easing-default),border-color var(--bizz-duration-base) var(--bizz-easing-default),color var(--bizz-duration-base) var(--bizz-easing-default),box-shadow var(--bizz-duration-base) var(--bizz-easing-default),transform var(--bizz-duration-fast) var(--bizz-easing-default);-webkit-user-select:none;user-select:none;outline:none}.bizz-button:focus-visible{box-shadow:0 0 0 3px var(--bizz-focus)}.bizz-button:active:not(:disabled){transform:translateY(1px)}.bizz-button--sm{height:2rem;padding:0 var(--bizz-spacing-04);font-size:var(--bizz-font-size-sm);border-radius:var(--bizz-radius-sm)}.bizz-button--md{height:2.5rem;padding:0 var(--bizz-spacing-05);font-size:var(--bizz-font-size-md)}.bizz-button--lg{height:3rem;padding:0 var(--bizz-spacing-06);font-size:var(--bizz-font-size-lg);border-radius:var(--bizz-radius-lg)}.bizz-button--primary{background-color:var(--bizz-button-primary);border-color:var(--bizz-button-primary);color:var(--bizz-text-on-color)}.bizz-button--primary:hover:not(:disabled){background-color:var(--bizz-button-primary-hover);border-color:var(--bizz-button-primary-hover);box-shadow:var(--bizz-shadow-md)}.bizz-button--primary:active:not(:disabled){background-color:var(--bizz-button-primary-active);border-color:var(--bizz-button-primary-active)}.bizz-button--secondary{background-color:transparent;border-color:var(--bizz-button-secondary);color:var(--bizz-button-secondary)}.bizz-button--secondary:hover:not(:disabled){background-color:var(--bizz-background-hover);border-color:var(--bizz-button-secondary-hover);color:var(--bizz-button-secondary-hover);box-shadow:var(--bizz-shadow-sm)}.bizz-button--secondary:active:not(:disabled){background-color:var(--bizz-background-active);border-color:var(--bizz-button-secondary-active);color:var(--bizz-button-secondary-active)}.bizz-button--disabled{background-color:transparent;border-color:transparent;color:var(--bizz-text-secondary)}.bizz-button--disabled:hover:not(:disabled){background-color:var(--bizz-background-hover);color:var(--bizz-text-primary)}.bizz-button--disabled:active:not(:disabled){background-color:var(--bizz-background-active)}.bizz-button--danger{background-color:var(--bizz-button-danger);border-color:var(--bizz-button-danger);color:var(--bizz-text-on-color)}.bizz-button--danger:hover:not(:disabled){background-color:var(--bizz-button-danger-hover);border-color:var(--bizz-button-danger-hover);box-shadow:var(--bizz-shadow-md)}.bizz-button--danger:active:not(:disabled){background-color:var(--bizz-button-danger-active);border-color:var(--bizz-button-danger-active)}.bizz-button:disabled{background-color:var(--bizz-button-disabled);border-color:var(--bizz-button-disabled);color:var(--bizz-text-on-color-disabled);cursor:not-allowed;transform:none;box-shadow:none}.bizz-button--full-width{width:100%}.bizz-button--loading{cursor:wait}.bizz-button__content--hidden{opacity:0}.bizz-button__spinner{position:absolute;width:1em;height:1em;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:bizz-spin .6s linear infinite}@keyframes bizz-spin{to{transform:rotate(360deg)}}\n"] }]
|
|
38
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
39
|
+
|
|
40
|
+
class BizzTagComponent {
|
|
41
|
+
color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
42
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
43
|
+
dismissible = input(false, ...(ngDevMode ? [{ debugName: "dismissible" }] : []));
|
|
44
|
+
dismissed = output();
|
|
45
|
+
get hostClasses() {
|
|
46
|
+
return `bizz-tag bizz-tag--${this.color()} bizz-tag--${this.size()}`;
|
|
47
|
+
}
|
|
48
|
+
onDismiss(event) {
|
|
49
|
+
event.stopPropagation();
|
|
50
|
+
this.dismissed.emit();
|
|
51
|
+
}
|
|
52
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BizzTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
53
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: BizzTagComponent, isStandalone: true, selector: "bizz-tag", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<span class=\"bizz-tag__label\"><ng-content /></span>\n@if (dismissible()) {\n <button\n class=\"bizz-tag__dismiss\"\n type=\"button\"\n aria-label=\"Dismiss\"\n (click)=\"onDismiss($event)\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M9 3L3 9M3 3l6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--bizz-spacing-02);border-radius:var(--bizz-radius-full);font-family:var(--bizz-font-family-base);font-weight:var(--bizz-font-weight-medium);white-space:nowrap;width:fit-content}:host(.bizz-tag--sm){height:1.25rem;padding:0 var(--bizz-spacing-03);font-size:var(--bizz-font-size-xs)}:host(.bizz-tag--md){height:1.5rem;padding:0 var(--bizz-spacing-03);font-size:var(--bizz-font-size-sm)}:host(.bizz-tag--primary){background-color:var(--bizz-tag-primary-bg);color:var(--bizz-tag-primary-text)}:host(.bizz-tag--primary:hover){background-color:var(--bizz-tag-primary-hover)}:host(.bizz-tag--secondary){background-color:var(--bizz-tag-secondary-bg);color:var(--bizz-tag-secondary-text)}:host(.bizz-tag--secondary:hover){background-color:var(--bizz-tag-secondary-hover)}:host(.bizz-tag--success){background-color:var(--bizz-tag-success-bg);color:var(--bizz-tag-success-text)}:host(.bizz-tag--success:hover){background-color:var(--bizz-tag-success-hover)}:host(.bizz-tag--warning){background-color:var(--bizz-tag-warning-bg);color:var(--bizz-tag-warning-text)}:host(.bizz-tag--warning:hover){background-color:var(--bizz-tag-warning-hover)}:host(.bizz-tag--error){background-color:var(--bizz-tag-error-bg);color:var(--bizz-tag-error-text)}:host(.bizz-tag--error:hover){background-color:var(--bizz-tag-error-hover)}.bizz-tag__dismiss{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:inherit;opacity:.7;transition:opacity var(--bizz-duration-fast) var(--bizz-easing-default);line-height:1}.bizz-tag__dismiss:hover{opacity:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
54
|
+
}
|
|
55
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BizzTagComponent, decorators: [{
|
|
56
|
+
type: Component,
|
|
57
|
+
args: [{ selector: 'bizz-tag', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"bizz-tag__label\"><ng-content /></span>\n@if (dismissible()) {\n <button\n class=\"bizz-tag__dismiss\"\n type=\"button\"\n aria-label=\"Dismiss\"\n (click)=\"onDismiss($event)\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M9 3L3 9M3 3l6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--bizz-spacing-02);border-radius:var(--bizz-radius-full);font-family:var(--bizz-font-family-base);font-weight:var(--bizz-font-weight-medium);white-space:nowrap;width:fit-content}:host(.bizz-tag--sm){height:1.25rem;padding:0 var(--bizz-spacing-03);font-size:var(--bizz-font-size-xs)}:host(.bizz-tag--md){height:1.5rem;padding:0 var(--bizz-spacing-03);font-size:var(--bizz-font-size-sm)}:host(.bizz-tag--primary){background-color:var(--bizz-tag-primary-bg);color:var(--bizz-tag-primary-text)}:host(.bizz-tag--primary:hover){background-color:var(--bizz-tag-primary-hover)}:host(.bizz-tag--secondary){background-color:var(--bizz-tag-secondary-bg);color:var(--bizz-tag-secondary-text)}:host(.bizz-tag--secondary:hover){background-color:var(--bizz-tag-secondary-hover)}:host(.bizz-tag--success){background-color:var(--bizz-tag-success-bg);color:var(--bizz-tag-success-text)}:host(.bizz-tag--success:hover){background-color:var(--bizz-tag-success-hover)}:host(.bizz-tag--warning){background-color:var(--bizz-tag-warning-bg);color:var(--bizz-tag-warning-text)}:host(.bizz-tag--warning:hover){background-color:var(--bizz-tag-warning-hover)}:host(.bizz-tag--error){background-color:var(--bizz-tag-error-bg);color:var(--bizz-tag-error-text)}:host(.bizz-tag--error:hover){background-color:var(--bizz-tag-error-hover)}.bizz-tag__dismiss{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:inherit;opacity:.7;transition:opacity var(--bizz-duration-fast) var(--bizz-easing-default);line-height:1}.bizz-tag__dismiss:hover{opacity:1}\n"] }]
|
|
58
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], hostClasses: [{
|
|
59
|
+
type: HostBinding,
|
|
60
|
+
args: ['class']
|
|
61
|
+
}] } });
|
|
62
|
+
|
|
63
|
+
class BizzCardComponent {
|
|
64
|
+
elevation = input('raised', ...(ngDevMode ? [{ debugName: "elevation" }] : []));
|
|
65
|
+
clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
|
|
66
|
+
padding = input('md', ...(ngDevMode ? [{ debugName: "padding" }] : []));
|
|
67
|
+
get hostClasses() {
|
|
68
|
+
const classes = [
|
|
69
|
+
'bizz-card',
|
|
70
|
+
`bizz-card--${this.elevation()}`,
|
|
71
|
+
`bizz-card--padding-${this.padding()}`,
|
|
72
|
+
];
|
|
73
|
+
if (this.clickable())
|
|
74
|
+
classes.push('bizz-card--clickable');
|
|
75
|
+
return classes.join(' ');
|
|
76
|
+
}
|
|
77
|
+
get role() {
|
|
78
|
+
return this.clickable() ? 'button' : null;
|
|
79
|
+
}
|
|
80
|
+
get tabIndex() {
|
|
81
|
+
return this.clickable() ? 0 : null;
|
|
82
|
+
}
|
|
83
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BizzCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
84
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: BizzCardComponent, isStandalone: true, selector: "bizz-card", inputs: { elevation: { classPropertyName: "elevation", publicName: "elevation", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses", "attr.role": "this.role", "attr.tabindex": "this.tabIndex" } }, ngImport: i0, template: "<ng-content select=\"[card-media]\" />\n\n<div class=\"bizz-card__body\">\n <ng-content select=\"[card-header]\" />\n <ng-content />\n <ng-content select=\"[card-footer]\" />\n</div>\n", styles: [":host{display:block;font-family:var(--bizz-font-family-base);background-color:var(--bizz-layer-02);border:1px solid var(--bizz-border-subtle-01);border-radius:var(--bizz-radius-lg);overflow:hidden;transition:box-shadow var(--bizz-duration-base) var(--bizz-easing-default),transform var(--bizz-duration-fast) var(--bizz-easing-default),border-color var(--bizz-duration-base) var(--bizz-easing-default)}:host(.bizz-card--flat){box-shadow:none}:host(.bizz-card--raised){box-shadow:var(--bizz-shadow-sm)}:host(.bizz-card--padding-none) .bizz-card__body{padding:0}:host(.bizz-card--padding-sm) .bizz-card__body{padding:var(--bizz-spacing-04)}:host(.bizz-card--padding-md) .bizz-card__body{padding:var(--bizz-spacing-06)}:host(.bizz-card--padding-lg) .bizz-card__body{padding:var(--bizz-spacing-08)}:host(.bizz-card--clickable){cursor:pointer;outline:none}:host(.bizz-card--clickable:hover){border-color:var(--bizz-border-interactive);box-shadow:var(--bizz-shadow-md);transform:translateY(-2px)}:host(.bizz-card--clickable:active){transform:translateY(0);box-shadow:var(--bizz-shadow-sm)}:host(.bizz-card--clickable:focus-visible){box-shadow:0 0 0 3px var(--bizz-focus)}::ng-deep [card-media]{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover;overflow:hidden}::ng-deep [card-media] img{width:100%;height:100%;object-fit:cover;display:block}::ng-deep [card-header]{display:block;margin-bottom:var(--bizz-spacing-04)}::ng-deep [card-footer]{display:block;margin-top:var(--bizz-spacing-05);padding-top:var(--bizz-spacing-04);border-top:1px solid var(--bizz-border-subtle-00)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
85
|
+
}
|
|
86
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BizzCardComponent, decorators: [{
|
|
87
|
+
type: Component,
|
|
88
|
+
args: [{ selector: 'bizz-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[card-media]\" />\n\n<div class=\"bizz-card__body\">\n <ng-content select=\"[card-header]\" />\n <ng-content />\n <ng-content select=\"[card-footer]\" />\n</div>\n", styles: [":host{display:block;font-family:var(--bizz-font-family-base);background-color:var(--bizz-layer-02);border:1px solid var(--bizz-border-subtle-01);border-radius:var(--bizz-radius-lg);overflow:hidden;transition:box-shadow var(--bizz-duration-base) var(--bizz-easing-default),transform var(--bizz-duration-fast) var(--bizz-easing-default),border-color var(--bizz-duration-base) var(--bizz-easing-default)}:host(.bizz-card--flat){box-shadow:none}:host(.bizz-card--raised){box-shadow:var(--bizz-shadow-sm)}:host(.bizz-card--padding-none) .bizz-card__body{padding:0}:host(.bizz-card--padding-sm) .bizz-card__body{padding:var(--bizz-spacing-04)}:host(.bizz-card--padding-md) .bizz-card__body{padding:var(--bizz-spacing-06)}:host(.bizz-card--padding-lg) .bizz-card__body{padding:var(--bizz-spacing-08)}:host(.bizz-card--clickable){cursor:pointer;outline:none}:host(.bizz-card--clickable:hover){border-color:var(--bizz-border-interactive);box-shadow:var(--bizz-shadow-md);transform:translateY(-2px)}:host(.bizz-card--clickable:active){transform:translateY(0);box-shadow:var(--bizz-shadow-sm)}:host(.bizz-card--clickable:focus-visible){box-shadow:0 0 0 3px var(--bizz-focus)}::ng-deep [card-media]{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover;overflow:hidden}::ng-deep [card-media] img{width:100%;height:100%;object-fit:cover;display:block}::ng-deep [card-header]{display:block;margin-bottom:var(--bizz-spacing-04)}::ng-deep [card-footer]{display:block;margin-top:var(--bizz-spacing-05);padding-top:var(--bizz-spacing-04);border-top:1px solid var(--bizz-border-subtle-00)}\n"] }]
|
|
89
|
+
}], propDecorators: { elevation: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevation", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], hostClasses: [{
|
|
90
|
+
type: HostBinding,
|
|
91
|
+
args: ['class']
|
|
92
|
+
}], role: [{
|
|
93
|
+
type: HostBinding,
|
|
94
|
+
args: ['attr.role']
|
|
95
|
+
}], tabIndex: [{
|
|
96
|
+
type: HostBinding,
|
|
97
|
+
args: ['attr.tabindex']
|
|
98
|
+
}] } });
|
|
99
|
+
|
|
100
|
+
class BizzInputComponent {
|
|
101
|
+
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
102
|
+
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
103
|
+
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
104
|
+
helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : []));
|
|
105
|
+
errorText = input('', ...(ngDevMode ? [{ debugName: "errorText" }] : []));
|
|
106
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
107
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
108
|
+
value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
109
|
+
touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
|
|
110
|
+
hasError = computed(() => this.touched() && (!!this.errorText() || (this.required() && !this.value().trim())), ...(ngDevMode ? [{ debugName: "hasError" }] : []));
|
|
111
|
+
errorMessage = computed(() => this.errorText(), ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
|
|
112
|
+
onChange = (_) => { };
|
|
113
|
+
onTouched = () => { };
|
|
114
|
+
hostClass = 'bizz-input-wrapper';
|
|
115
|
+
onInput(event) {
|
|
116
|
+
const val = event.target.value;
|
|
117
|
+
this.value.set(val);
|
|
118
|
+
this.onChange(val);
|
|
119
|
+
}
|
|
120
|
+
onBlur() {
|
|
121
|
+
this.touched.set(true);
|
|
122
|
+
this.onTouched();
|
|
123
|
+
}
|
|
124
|
+
writeValue(val) {
|
|
125
|
+
this.value.set(val ?? '');
|
|
126
|
+
}
|
|
127
|
+
registerOnChange(fn) {
|
|
128
|
+
this.onChange = fn;
|
|
129
|
+
}
|
|
130
|
+
registerOnTouched(fn) {
|
|
131
|
+
this.onTouched = fn;
|
|
132
|
+
}
|
|
133
|
+
setDisabledState(disabled) {
|
|
134
|
+
// handled via input signal
|
|
135
|
+
}
|
|
136
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BizzInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
137
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: BizzInputComponent, isStandalone: true, selector: "bizz-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, providers: [{
|
|
138
|
+
provide: NG_VALUE_ACCESSOR,
|
|
139
|
+
useExisting: forwardRef(() => BizzInputComponent),
|
|
140
|
+
multi: true,
|
|
141
|
+
}], ngImport: i0, template: "@if (label()) {\n <label class=\"bizz-input__label\">{{ label() }}</label>\n}\n\n<div class=\"bizz-input__field-wrapper\" [class.bizz-input__field-wrapper--error]=\"hasError()\" [class.bizz-input__field-wrapper--disabled]=\"disabled()\">\n <ng-content select=\"[input-prefix]\" />\n <input\n class=\"bizz-input__field\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"hasError() ? 'error' : helperText() ? 'helper' : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <ng-content select=\"[input-suffix]\" />\n</div>\n\n@if (hasError()) {\n <span class=\"bizz-input__error\" id=\"error\" role=\"alert\">{{ errorMessage() }}</span>\n} @else if (helperText()) {\n <span class=\"bizz-input__helper\" id=\"helper\">{{ helperText() }}</span>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--bizz-spacing-02);font-family:var(--bizz-font-family-base)}.bizz-input__label{font-size:var(--bizz-font-size-sm);font-weight:var(--bizz-font-weight-semibold);color:var(--bizz-text-primary);line-height:var(--bizz-line-height-normal)}.bizz-input__field-wrapper{display:flex;align-items:center;gap:var(--bizz-spacing-03);border:1px solid var(--bizz-border-strong-01);border-radius:var(--bizz-radius-md);padding:0 var(--bizz-spacing-04);height:2.5rem;transition:border-color var(--bizz-duration-base) var(--bizz-easing-default),box-shadow var(--bizz-duration-base) var(--bizz-easing-default)}.bizz-input__field-wrapper:focus-within{border-color:var(--bizz-focus);box-shadow:0 0 0 2px var(--bizz-focus);outline:none}.bizz-input__field-wrapper--error{border-color:var(--bizz-support-error)}.bizz-input__field-wrapper--error:focus-within{box-shadow:0 0 0 2px var(--bizz-support-error)}.bizz-input__field-wrapper--disabled{opacity:.5;cursor:not-allowed;background-color:var(--bizz-field-hover-01)}.bizz-input__field{flex:1;border:none;outline:none;background:transparent;font-family:var(--bizz-font-family-base);font-size:var(--bizz-font-size-md);color:var(--bizz-text-primary);line-height:var(--bizz-line-height-normal);min-width:0}.bizz-input__field::placeholder{color:var(--bizz-text-placeholder)}.bizz-input__field:disabled{cursor:not-allowed}.bizz-input__helper{font-size:var(--bizz-font-size-xs);color:var(--bizz-text-helper);line-height:var(--bizz-line-height-normal)}.bizz-input__error{font-size:var(--bizz-font-size-xs);color:var(--bizz-support-error);line-height:var(--bizz-line-height-normal)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
142
|
+
}
|
|
143
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BizzInputComponent, decorators: [{
|
|
144
|
+
type: Component,
|
|
145
|
+
args: [{ selector: 'bizz-input', standalone: true, imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
146
|
+
provide: NG_VALUE_ACCESSOR,
|
|
147
|
+
useExisting: forwardRef(() => BizzInputComponent),
|
|
148
|
+
multi: true,
|
|
149
|
+
}], template: "@if (label()) {\n <label class=\"bizz-input__label\">{{ label() }}</label>\n}\n\n<div class=\"bizz-input__field-wrapper\" [class.bizz-input__field-wrapper--error]=\"hasError()\" [class.bizz-input__field-wrapper--disabled]=\"disabled()\">\n <ng-content select=\"[input-prefix]\" />\n <input\n class=\"bizz-input__field\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"hasError() ? 'error' : helperText() ? 'helper' : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <ng-content select=\"[input-suffix]\" />\n</div>\n\n@if (hasError()) {\n <span class=\"bizz-input__error\" id=\"error\" role=\"alert\">{{ errorMessage() }}</span>\n} @else if (helperText()) {\n <span class=\"bizz-input__helper\" id=\"helper\">{{ helperText() }}</span>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--bizz-spacing-02);font-family:var(--bizz-font-family-base)}.bizz-input__label{font-size:var(--bizz-font-size-sm);font-weight:var(--bizz-font-weight-semibold);color:var(--bizz-text-primary);line-height:var(--bizz-line-height-normal)}.bizz-input__field-wrapper{display:flex;align-items:center;gap:var(--bizz-spacing-03);border:1px solid var(--bizz-border-strong-01);border-radius:var(--bizz-radius-md);padding:0 var(--bizz-spacing-04);height:2.5rem;transition:border-color var(--bizz-duration-base) var(--bizz-easing-default),box-shadow var(--bizz-duration-base) var(--bizz-easing-default)}.bizz-input__field-wrapper:focus-within{border-color:var(--bizz-focus);box-shadow:0 0 0 2px var(--bizz-focus);outline:none}.bizz-input__field-wrapper--error{border-color:var(--bizz-support-error)}.bizz-input__field-wrapper--error:focus-within{box-shadow:0 0 0 2px var(--bizz-support-error)}.bizz-input__field-wrapper--disabled{opacity:.5;cursor:not-allowed;background-color:var(--bizz-field-hover-01)}.bizz-input__field{flex:1;border:none;outline:none;background:transparent;font-family:var(--bizz-font-family-base);font-size:var(--bizz-font-size-md);color:var(--bizz-text-primary);line-height:var(--bizz-line-height-normal);min-width:0}.bizz-input__field::placeholder{color:var(--bizz-text-placeholder)}.bizz-input__field:disabled{cursor:not-allowed}.bizz-input__helper{font-size:var(--bizz-font-size-xs);color:var(--bizz-text-helper);line-height:var(--bizz-line-height-normal)}.bizz-input__error{font-size:var(--bizz-font-size-xs);color:var(--bizz-support-error);line-height:var(--bizz-line-height-normal)}\n"] }]
|
|
150
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hostClass: [{
|
|
151
|
+
type: HostBinding,
|
|
152
|
+
args: ['class']
|
|
153
|
+
}] } });
|
|
154
|
+
|
|
155
|
+
class BizzTextareaComponent {
|
|
156
|
+
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
157
|
+
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
158
|
+
helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : []));
|
|
159
|
+
errorText = input('', ...(ngDevMode ? [{ debugName: "errorText" }] : []));
|
|
160
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
161
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
162
|
+
rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : []));
|
|
163
|
+
autoResize = input(false, ...(ngDevMode ? [{ debugName: "autoResize" }] : []));
|
|
164
|
+
value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
165
|
+
touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
|
|
166
|
+
hasError = computed(() => this.touched() && (!!this.errorText() || (this.required() && !this.value().trim())), ...(ngDevMode ? [{ debugName: "hasError" }] : []));
|
|
167
|
+
errorMessage = computed(() => this.errorText(), ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
|
|
168
|
+
textareaRef = viewChild('textarea', ...(ngDevMode ? [{ debugName: "textareaRef" }] : []));
|
|
169
|
+
onChange = (_) => { };
|
|
170
|
+
onTouched = () => { };
|
|
171
|
+
hostClass = 'bizz-textarea-wrapper';
|
|
172
|
+
onInput(event) {
|
|
173
|
+
const el = event.target;
|
|
174
|
+
this.value.set(el.value);
|
|
175
|
+
this.onChange(el.value);
|
|
176
|
+
if (this.autoResize()) {
|
|
177
|
+
el.style.height = 'auto';
|
|
178
|
+
el.style.height = el.scrollHeight + 'px';
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
onBlur() {
|
|
182
|
+
this.touched.set(true);
|
|
183
|
+
this.onTouched();
|
|
184
|
+
}
|
|
185
|
+
writeValue(val) {
|
|
186
|
+
this.value.set(val ?? '');
|
|
187
|
+
}
|
|
188
|
+
registerOnChange(fn) {
|
|
189
|
+
this.onChange = fn;
|
|
190
|
+
}
|
|
191
|
+
registerOnTouched(fn) {
|
|
192
|
+
this.onTouched = fn;
|
|
193
|
+
}
|
|
194
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BizzTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
195
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: BizzTextareaComponent, isStandalone: true, selector: "bizz-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, providers: [{
|
|
196
|
+
provide: NG_VALUE_ACCESSOR,
|
|
197
|
+
useExisting: forwardRef(() => BizzTextareaComponent),
|
|
198
|
+
multi: true,
|
|
199
|
+
}], viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textarea"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <label class=\"bizz-textarea__label\">{{ label() }}</label>\n}\n\n<div class=\"bizz-textarea__field-wrapper\" [class.bizz-textarea__field-wrapper--error]=\"hasError()\" [class.bizz-textarea__field-wrapper--disabled]=\"disabled()\">\n <textarea\n #textarea\n class=\"bizz-textarea__field\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [rows]=\"rows()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"hasError() ? 'ta-error' : helperText() ? 'ta-helper' : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n >{{ value() }}</textarea>\n</div>\n\n@if (hasError()) {\n <span class=\"bizz-textarea__error\" id=\"ta-error\" role=\"alert\">{{ errorMessage() }}</span>\n} @else if (helperText()) {\n <span class=\"bizz-textarea__helper\" id=\"ta-helper\">{{ helperText() }}</span>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--bizz-spacing-02);font-family:var(--bizz-font-family-base)}.bizz-textarea__label{font-size:var(--bizz-font-size-sm);font-weight:var(--bizz-font-weight-semibold);color:var(--bizz-text-primary);line-height:var(--bizz-line-height-normal)}.bizz-textarea__field-wrapper{border:1px solid var(--bizz-border-strong-01);border-radius:var(--bizz-radius-md);padding:var(--bizz-spacing-03) var(--bizz-spacing-04);transition:border-color var(--bizz-duration-base) var(--bizz-easing-default),box-shadow var(--bizz-duration-base) var(--bizz-easing-default)}.bizz-textarea__field-wrapper:focus-within{border-color:var(--bizz-focus);box-shadow:0 0 0 2px var(--bizz-focus);outline:none}.bizz-textarea__field-wrapper--error{border-color:var(--bizz-support-error)}.bizz-textarea__field-wrapper--error:focus-within{box-shadow:0 0 0 2px var(--bizz-support-error)}.bizz-textarea__field-wrapper--disabled{opacity:.5;cursor:not-allowed;background-color:var(--bizz-field-hover-01)}.bizz-textarea__field{width:100%;border:none;outline:none;background:transparent;font-family:var(--bizz-font-family-base);font-size:var(--bizz-font-size-md);color:var(--bizz-text-primary);line-height:var(--bizz-line-height-relaxed);resize:vertical;box-sizing:border-box}.bizz-textarea__field::placeholder{color:var(--bizz-text-placeholder)}.bizz-textarea__field:disabled{cursor:not-allowed;resize:none}.bizz-textarea__helper{font-size:var(--bizz-font-size-xs);color:var(--bizz-text-helper);line-height:var(--bizz-line-height-normal)}.bizz-textarea__error{font-size:var(--bizz-font-size-xs);color:var(--bizz-support-error);line-height:var(--bizz-line-height-normal)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
200
|
+
}
|
|
201
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BizzTextareaComponent, decorators: [{
|
|
202
|
+
type: Component,
|
|
203
|
+
args: [{ selector: 'bizz-textarea', standalone: true, imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
204
|
+
provide: NG_VALUE_ACCESSOR,
|
|
205
|
+
useExisting: forwardRef(() => BizzTextareaComponent),
|
|
206
|
+
multi: true,
|
|
207
|
+
}], template: "@if (label()) {\n <label class=\"bizz-textarea__label\">{{ label() }}</label>\n}\n\n<div class=\"bizz-textarea__field-wrapper\" [class.bizz-textarea__field-wrapper--error]=\"hasError()\" [class.bizz-textarea__field-wrapper--disabled]=\"disabled()\">\n <textarea\n #textarea\n class=\"bizz-textarea__field\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [rows]=\"rows()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"hasError() ? 'ta-error' : helperText() ? 'ta-helper' : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n >{{ value() }}</textarea>\n</div>\n\n@if (hasError()) {\n <span class=\"bizz-textarea__error\" id=\"ta-error\" role=\"alert\">{{ errorMessage() }}</span>\n} @else if (helperText()) {\n <span class=\"bizz-textarea__helper\" id=\"ta-helper\">{{ helperText() }}</span>\n}\n", styles: [":host{display:flex;flex-direction:column;gap:var(--bizz-spacing-02);font-family:var(--bizz-font-family-base)}.bizz-textarea__label{font-size:var(--bizz-font-size-sm);font-weight:var(--bizz-font-weight-semibold);color:var(--bizz-text-primary);line-height:var(--bizz-line-height-normal)}.bizz-textarea__field-wrapper{border:1px solid var(--bizz-border-strong-01);border-radius:var(--bizz-radius-md);padding:var(--bizz-spacing-03) var(--bizz-spacing-04);transition:border-color var(--bizz-duration-base) var(--bizz-easing-default),box-shadow var(--bizz-duration-base) var(--bizz-easing-default)}.bizz-textarea__field-wrapper:focus-within{border-color:var(--bizz-focus);box-shadow:0 0 0 2px var(--bizz-focus);outline:none}.bizz-textarea__field-wrapper--error{border-color:var(--bizz-support-error)}.bizz-textarea__field-wrapper--error:focus-within{box-shadow:0 0 0 2px var(--bizz-support-error)}.bizz-textarea__field-wrapper--disabled{opacity:.5;cursor:not-allowed;background-color:var(--bizz-field-hover-01)}.bizz-textarea__field{width:100%;border:none;outline:none;background:transparent;font-family:var(--bizz-font-family-base);font-size:var(--bizz-font-size-md);color:var(--bizz-text-primary);line-height:var(--bizz-line-height-relaxed);resize:vertical;box-sizing:border-box}.bizz-textarea__field::placeholder{color:var(--bizz-text-placeholder)}.bizz-textarea__field:disabled{cursor:not-allowed;resize:none}.bizz-textarea__helper{font-size:var(--bizz-font-size-xs);color:var(--bizz-text-helper);line-height:var(--bizz-line-height-normal)}.bizz-textarea__error{font-size:var(--bizz-font-size-xs);color:var(--bizz-support-error);line-height:var(--bizz-line-height-normal)}\n"] }]
|
|
208
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorText: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], textareaRef: [{ type: i0.ViewChild, args: ['textarea', { isSignal: true }] }], hostClass: [{
|
|
209
|
+
type: HostBinding,
|
|
210
|
+
args: ['class']
|
|
211
|
+
}] } });
|
|
212
|
+
|
|
213
|
+
/*
|
|
214
|
+
* Public API Surface of bizz-components
|
|
215
|
+
*/
|
|
216
|
+
|
|
217
|
+
/**
|
|
218
|
+
* Generated bundle index. Do not edit.
|
|
219
|
+
*/
|
|
220
|
+
|
|
221
|
+
export { BizzButtonComponent, BizzCardComponent, BizzInputComponent, BizzTagComponent, BizzTextareaComponent };
|
|
222
|
+
//# sourceMappingURL=bizz-components.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bizz-components.mjs","sources":["../../../projects/bizz-components/src/lib/button/button.component.ts","../../../projects/bizz-components/src/lib/button/button.component.html","../../../projects/bizz-components/src/lib/tag/tag.component.ts","../../../projects/bizz-components/src/lib/tag/tag.component.html","../../../projects/bizz-components/src/lib/card/card.component.ts","../../../projects/bizz-components/src/lib/card/card.component.html","../../../projects/bizz-components/src/lib/input/input.component.ts","../../../projects/bizz-components/src/lib/input/input.component.html","../../../projects/bizz-components/src/lib/textarea/textarea.component.ts","../../../projects/bizz-components/src/lib/textarea/textarea.component.html","../../../projects/bizz-components/src/public-api.ts","../../../projects/bizz-components/src/bizz-components.ts"],"sourcesContent":["import { Component, input, output, computed, ChangeDetectionStrategy } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'disabled' | 'danger';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonType = 'button' | 'submit' | 'reset';\n\n@Component({\n selector: 'bizz-button',\n standalone: true,\n imports: [CommonModule],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './button.component.html',\n styleUrl: './button.component.css',\n})\nexport class BizzButtonComponent {\n variant = input<ButtonVariant>('primary');\n size = input<ButtonSize>('md');\n type = input<ButtonType>('button');\n disabled = input<boolean>(false);\n loading = input<boolean>(false);\n fullWidth = input<boolean>(false);\n\n clicked = output<MouseEvent>();\n\n classes = computed(() => {\n const parts = [\n 'bizz-button',\n `bizz-button--${this.variant()}`,\n `bizz-button--${this.size()}`,\n ];\n if (this.fullWidth()) parts.push('bizz-button--full-width');\n if (this.loading()) parts.push('bizz-button--loading');\n return parts.join(' ');\n });\n\n isDisabled = computed(() => this.disabled() || this.loading());\n\n onClick(event: MouseEvent): void {\n if (!this.isDisabled()) {\n this.clicked.emit(event);\n }\n }\n}\n","<button\n [class]=\"classes()\"\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClick($event)\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n>\n @if (loading()) {\n <span class=\"bizz-button__spinner\" aria-hidden=\"true\"></span>\n }\n <span class=\"bizz-button__content\" [class.bizz-button__content--hidden]=\"loading()\">\n <ng-content />\n </span>\n</button>\n","import { Component, input, output, computed, HostBinding, ChangeDetectionStrategy } from '@angular/core';\n\nexport type TagColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success';\n\nexport type TagSize = 'sm' | 'md';\n\n@Component({\n selector: 'bizz-tag',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './tag.component.html',\n styleUrl: './tag.component.css',\n})\nexport class BizzTagComponent {\n color = input<TagColor>('primary');\n size = input<TagSize>('md');\n dismissible = input<boolean>(false);\n\n dismissed = output<void>();\n\n @HostBinding('class')\n get hostClasses(): string {\n return `bizz-tag bizz-tag--${this.color()} bizz-tag--${this.size()}`;\n }\n\n onDismiss(event: MouseEvent): void {\n event.stopPropagation();\n this.dismissed.emit();\n }\n}\n","<span class=\"bizz-tag__label\"><ng-content /></span>\n@if (dismissible()) {\n <button\n class=\"bizz-tag__dismiss\"\n type=\"button\"\n aria-label=\"Dismiss\"\n (click)=\"onDismiss($event)\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M9 3L3 9M3 3l6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n}\n","import { Component, input, HostBinding, ChangeDetectionStrategy } from '@angular/core';\n\nexport type CardElevation = 'flat' | 'raised';\n\n@Component({\n selector: 'bizz-card',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './card.component.html',\n styleUrl: './card.component.css',\n})\nexport class BizzCardComponent {\n elevation = input<CardElevation>('raised');\n clickable = input<boolean>(false);\n padding = input<'none' | 'sm' | 'md' | 'lg'>('md');\n\n @HostBinding('class')\n get hostClasses(): string {\n const classes = [\n 'bizz-card',\n `bizz-card--${this.elevation()}`,\n `bizz-card--padding-${this.padding()}`,\n ];\n if (this.clickable()) classes.push('bizz-card--clickable');\n return classes.join(' ');\n }\n\n @HostBinding('attr.role')\n get role(): string | null {\n return this.clickable() ? 'button' : null;\n }\n\n @HostBinding('attr.tabindex')\n get tabIndex(): number | null {\n return this.clickable() ? 0 : null;\n }\n}\n","<ng-content select=\"[card-media]\" />\n\n<div class=\"bizz-card__body\">\n <ng-content select=\"[card-header]\" />\n <ng-content />\n <ng-content select=\"[card-footer]\" />\n</div>\n","import {\n Component, input, signal, computed,\n ChangeDetectionStrategy, forwardRef, HostBinding\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';\n\nexport type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';\n\n@Component({\n selector: 'bizz-input',\n standalone: true,\n imports: [ReactiveFormsModule],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './input.component.html',\n styleUrl: './input.component.css',\n providers: [{\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => BizzInputComponent),\n multi: true,\n }],\n})\nexport class BizzInputComponent implements ControlValueAccessor {\n label = input<string>('');\n placeholder = input<string>('');\n type = input<InputType>('text');\n helperText = input<string>('');\n errorText = input<string>('');\n disabled = input<boolean>(false);\n required = input<boolean>(false);\n\n value = signal<string>('');\n touched = signal<boolean>(false);\n\n hasError = computed(() =>\n this.touched() && (!!this.errorText() || (this.required() && !this.value().trim()))\n );\n\n errorMessage = computed(() => this.errorText());\n\n private onChange = (_: string) => {};\n private onTouched = () => {};\n\n @HostBinding('class') hostClass = 'bizz-input-wrapper';\n\n onInput(event: Event): void {\n const val = (event.target as HTMLInputElement).value;\n this.value.set(val);\n this.onChange(val);\n }\n\n onBlur(): void {\n this.touched.set(true);\n this.onTouched();\n }\n\n writeValue(val: string): void {\n this.value.set(val ?? '');\n }\n\n registerOnChange(fn: (_: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(disabled: boolean): void {\n // handled via input signal\n }\n}\n","@if (label()) {\n <label class=\"bizz-input__label\">{{ label() }}</label>\n}\n\n<div class=\"bizz-input__field-wrapper\" [class.bizz-input__field-wrapper--error]=\"hasError()\" [class.bizz-input__field-wrapper--disabled]=\"disabled()\">\n <ng-content select=\"[input-prefix]\" />\n <input\n class=\"bizz-input__field\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"hasError() ? 'error' : helperText() ? 'helper' : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <ng-content select=\"[input-suffix]\" />\n</div>\n\n@if (hasError()) {\n <span class=\"bizz-input__error\" id=\"error\" role=\"alert\">{{ errorMessage() }}</span>\n} @else if (helperText()) {\n <span class=\"bizz-input__helper\" id=\"helper\">{{ helperText() }}</span>\n}\n","import {\n Component, input, signal, computed,\n ChangeDetectionStrategy, forwardRef, HostBinding, ElementRef, viewChild\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';\n\n@Component({\n selector: 'bizz-textarea',\n standalone: true,\n imports: [ReactiveFormsModule],\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './textarea.component.html',\n styleUrl: './textarea.component.css',\n providers: [{\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => BizzTextareaComponent),\n multi: true,\n }],\n})\nexport class BizzTextareaComponent implements ControlValueAccessor {\n label = input<string>('');\n placeholder = input<string>('');\n helperText = input<string>('');\n errorText = input<string>('');\n disabled = input<boolean>(false);\n required = input<boolean>(false);\n rows = input<number>(4);\n autoResize = input<boolean>(false);\n\n value = signal<string>('');\n touched = signal<boolean>(false);\n\n hasError = computed(() =>\n this.touched() && (!!this.errorText() || (this.required() && !this.value().trim()))\n );\n\n errorMessage = computed(() => this.errorText());\n\n private textareaRef = viewChild<ElementRef<HTMLTextAreaElement>>('textarea');\n private onChange = (_: string) => {};\n private onTouched = () => {};\n\n @HostBinding('class') hostClass = 'bizz-textarea-wrapper';\n\n onInput(event: Event): void {\n const el = event.target as HTMLTextAreaElement;\n this.value.set(el.value);\n this.onChange(el.value);\n if (this.autoResize()) {\n el.style.height = 'auto';\n el.style.height = el.scrollHeight + 'px';\n }\n }\n\n onBlur(): void {\n this.touched.set(true);\n this.onTouched();\n }\n\n writeValue(val: string): void {\n this.value.set(val ?? '');\n }\n\n registerOnChange(fn: (_: string) => void): void {\n this.onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n}\n","@if (label()) {\n <label class=\"bizz-textarea__label\">{{ label() }}</label>\n}\n\n<div class=\"bizz-textarea__field-wrapper\" [class.bizz-textarea__field-wrapper--error]=\"hasError()\" [class.bizz-textarea__field-wrapper--disabled]=\"disabled()\">\n <textarea\n #textarea\n class=\"bizz-textarea__field\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [required]=\"required()\"\n [rows]=\"rows()\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"hasError() ? 'ta-error' : helperText() ? 'ta-helper' : null\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n >{{ value() }}</textarea>\n</div>\n\n@if (hasError()) {\n <span class=\"bizz-textarea__error\" id=\"ta-error\" role=\"alert\">{{ errorMessage() }}</span>\n} @else if (helperText()) {\n <span class=\"bizz-textarea__helper\" id=\"ta-helper\">{{ helperText() }}</span>\n}\n","/*\n * Public API Surface of bizz-components\n */\n\nexport * from './lib/button/button.component';\nexport * from './lib/tag/tag.component';\nexport * from './lib/card/card.component';\nexport * from './lib/input/input.component';\nexport * from './lib/textarea/textarea.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/index.d.ts
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { ControlValueAccessor } from '@angular/forms';
|
|
3
|
+
|
|
4
|
+
type ButtonVariant = 'primary' | 'secondary' | 'disabled' | 'danger';
|
|
5
|
+
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
6
|
+
type ButtonType = 'button' | 'submit' | 'reset';
|
|
7
|
+
declare class BizzButtonComponent {
|
|
8
|
+
variant: _angular_core.InputSignal<ButtonVariant>;
|
|
9
|
+
size: _angular_core.InputSignal<ButtonSize>;
|
|
10
|
+
type: _angular_core.InputSignal<ButtonType>;
|
|
11
|
+
disabled: _angular_core.InputSignal<boolean>;
|
|
12
|
+
loading: _angular_core.InputSignal<boolean>;
|
|
13
|
+
fullWidth: _angular_core.InputSignal<boolean>;
|
|
14
|
+
clicked: _angular_core.OutputEmitterRef<MouseEvent>;
|
|
15
|
+
classes: _angular_core.Signal<string>;
|
|
16
|
+
isDisabled: _angular_core.Signal<boolean>;
|
|
17
|
+
onClick(event: MouseEvent): void;
|
|
18
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BizzButtonComponent, never>;
|
|
19
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BizzButtonComponent, "bizz-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
type TagColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success';
|
|
23
|
+
type TagSize = 'sm' | 'md';
|
|
24
|
+
declare class BizzTagComponent {
|
|
25
|
+
color: _angular_core.InputSignal<TagColor>;
|
|
26
|
+
size: _angular_core.InputSignal<TagSize>;
|
|
27
|
+
dismissible: _angular_core.InputSignal<boolean>;
|
|
28
|
+
dismissed: _angular_core.OutputEmitterRef<void>;
|
|
29
|
+
get hostClasses(): string;
|
|
30
|
+
onDismiss(event: MouseEvent): void;
|
|
31
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BizzTagComponent, never>;
|
|
32
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BizzTagComponent, "bizz-tag", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; }, never, ["*"], true, never>;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
type CardElevation = 'flat' | 'raised';
|
|
36
|
+
declare class BizzCardComponent {
|
|
37
|
+
elevation: _angular_core.InputSignal<CardElevation>;
|
|
38
|
+
clickable: _angular_core.InputSignal<boolean>;
|
|
39
|
+
padding: _angular_core.InputSignal<"sm" | "md" | "lg" | "none">;
|
|
40
|
+
get hostClasses(): string;
|
|
41
|
+
get role(): string | null;
|
|
42
|
+
get tabIndex(): number | null;
|
|
43
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BizzCardComponent, never>;
|
|
44
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BizzCardComponent, "bizz-card", never, { "elevation": { "alias": "elevation"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; }, {}, never, ["[card-media]", "[card-header]", "*", "[card-footer]"], true, never>;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
|
|
48
|
+
declare class BizzInputComponent implements ControlValueAccessor {
|
|
49
|
+
label: _angular_core.InputSignal<string>;
|
|
50
|
+
placeholder: _angular_core.InputSignal<string>;
|
|
51
|
+
type: _angular_core.InputSignal<InputType>;
|
|
52
|
+
helperText: _angular_core.InputSignal<string>;
|
|
53
|
+
errorText: _angular_core.InputSignal<string>;
|
|
54
|
+
disabled: _angular_core.InputSignal<boolean>;
|
|
55
|
+
required: _angular_core.InputSignal<boolean>;
|
|
56
|
+
value: _angular_core.WritableSignal<string>;
|
|
57
|
+
touched: _angular_core.WritableSignal<boolean>;
|
|
58
|
+
hasError: _angular_core.Signal<boolean>;
|
|
59
|
+
errorMessage: _angular_core.Signal<string>;
|
|
60
|
+
private onChange;
|
|
61
|
+
private onTouched;
|
|
62
|
+
hostClass: string;
|
|
63
|
+
onInput(event: Event): void;
|
|
64
|
+
onBlur(): void;
|
|
65
|
+
writeValue(val: string): void;
|
|
66
|
+
registerOnChange(fn: (_: string) => void): void;
|
|
67
|
+
registerOnTouched(fn: () => void): void;
|
|
68
|
+
setDisabledState(disabled: boolean): void;
|
|
69
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BizzInputComponent, never>;
|
|
70
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BizzInputComponent, "bizz-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, {}, never, ["[input-prefix]", "[input-suffix]"], true, never>;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
declare class BizzTextareaComponent implements ControlValueAccessor {
|
|
74
|
+
label: _angular_core.InputSignal<string>;
|
|
75
|
+
placeholder: _angular_core.InputSignal<string>;
|
|
76
|
+
helperText: _angular_core.InputSignal<string>;
|
|
77
|
+
errorText: _angular_core.InputSignal<string>;
|
|
78
|
+
disabled: _angular_core.InputSignal<boolean>;
|
|
79
|
+
required: _angular_core.InputSignal<boolean>;
|
|
80
|
+
rows: _angular_core.InputSignal<number>;
|
|
81
|
+
autoResize: _angular_core.InputSignal<boolean>;
|
|
82
|
+
value: _angular_core.WritableSignal<string>;
|
|
83
|
+
touched: _angular_core.WritableSignal<boolean>;
|
|
84
|
+
hasError: _angular_core.Signal<boolean>;
|
|
85
|
+
errorMessage: _angular_core.Signal<string>;
|
|
86
|
+
private textareaRef;
|
|
87
|
+
private onChange;
|
|
88
|
+
private onTouched;
|
|
89
|
+
hostClass: string;
|
|
90
|
+
onInput(event: Event): void;
|
|
91
|
+
onBlur(): void;
|
|
92
|
+
writeValue(val: string): void;
|
|
93
|
+
registerOnChange(fn: (_: string) => void): void;
|
|
94
|
+
registerOnTouched(fn: () => void): void;
|
|
95
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BizzTextareaComponent, never>;
|
|
96
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BizzTextareaComponent, "bizz-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "autoResize": { "alias": "autoResize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
export { BizzButtonComponent, BizzCardComponent, BizzInputComponent, BizzTagComponent, BizzTextareaComponent };
|
|
100
|
+
export type { ButtonSize, ButtonType, ButtonVariant, CardElevation, InputType, TagColor, TagSize };
|
package/package.json
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "bizz-components",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Bizz Design System — Angular component library with theming",
|
|
5
|
+
"author": "Beatriz Nascimento",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"design-system",
|
|
9
|
+
"components",
|
|
10
|
+
"angular",
|
|
11
|
+
"theming",
|
|
12
|
+
"storybook",
|
|
13
|
+
"web-components"
|
|
14
|
+
],
|
|
15
|
+
"peerDependencies": {
|
|
16
|
+
"@angular/common": "^20.0.0",
|
|
17
|
+
"@angular/core": "^20.0.0"
|
|
18
|
+
},
|
|
19
|
+
"dependencies": {
|
|
20
|
+
"tslib": "^2.3.0"
|
|
21
|
+
},
|
|
22
|
+
"sideEffects": [
|
|
23
|
+
"*.css"
|
|
24
|
+
],
|
|
25
|
+
"module": "fesm2022/bizz-components.mjs",
|
|
26
|
+
"typings": "index.d.ts",
|
|
27
|
+
"exports": {
|
|
28
|
+
"./package.json": {
|
|
29
|
+
"default": "./package.json"
|
|
30
|
+
},
|
|
31
|
+
".": {
|
|
32
|
+
"types": "./index.d.ts",
|
|
33
|
+
"default": "./fesm2022/bizz-components.mjs"
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
/* ============================================
|
|
2
|
+
BIZZ DESIGN SYSTEM — COLOR PRIMITIVES
|
|
3
|
+
Define your 5 base colors here.
|
|
4
|
+
All shades are derived automatically via color-mix().
|
|
5
|
+
============================================ */
|
|
6
|
+
|
|
7
|
+
:root {
|
|
8
|
+
/* ---- Base colors (customize these) ---- */
|
|
9
|
+
--bizz-primary: #0f62fe;
|
|
10
|
+
--bizz-secondary: #525252;
|
|
11
|
+
--bizz-success: #24a148;
|
|
12
|
+
--bizz-warning: #f59e0b;
|
|
13
|
+
--bizz-error: #da1e28;
|
|
14
|
+
|
|
15
|
+
/* Fixed */
|
|
16
|
+
--bizz-white: #ffffff;
|
|
17
|
+
--bizz-black: #000000;
|
|
18
|
+
|
|
19
|
+
/* ---- Primary shades ---- */
|
|
20
|
+
--bizz-primary-10: color-mix(in oklch, var(--bizz-primary) 8%, white);
|
|
21
|
+
--bizz-primary-20: color-mix(in oklch, var(--bizz-primary) 18%, white);
|
|
22
|
+
--bizz-primary-30: color-mix(in oklch, var(--bizz-primary) 35%, white);
|
|
23
|
+
--bizz-primary-40: color-mix(in oklch, var(--bizz-primary) 55%, white);
|
|
24
|
+
--bizz-primary-50: color-mix(in oklch, var(--bizz-primary) 75%, white);
|
|
25
|
+
--bizz-primary-60: var(--bizz-primary);
|
|
26
|
+
--bizz-primary-70: color-mix(in oklch, var(--bizz-primary) 85%, black);
|
|
27
|
+
--bizz-primary-80: color-mix(in oklch, var(--bizz-primary) 65%, black);
|
|
28
|
+
--bizz-primary-90: color-mix(in oklch, var(--bizz-primary) 45%, black);
|
|
29
|
+
--bizz-primary-100: color-mix(in oklch, var(--bizz-primary) 25%, black);
|
|
30
|
+
|
|
31
|
+
/* ---- Secondary shades ---- */
|
|
32
|
+
--bizz-secondary-10: color-mix(in oklch, var(--bizz-secondary) 8%, white);
|
|
33
|
+
--bizz-secondary-20: color-mix(in oklch, var(--bizz-secondary) 18%, white);
|
|
34
|
+
--bizz-secondary-30: color-mix(in oklch, var(--bizz-secondary) 35%, white);
|
|
35
|
+
--bizz-secondary-40: color-mix(in oklch, var(--bizz-secondary) 55%, white);
|
|
36
|
+
--bizz-secondary-50: color-mix(in oklch, var(--bizz-secondary) 75%, white);
|
|
37
|
+
--bizz-secondary-60: var(--bizz-secondary);
|
|
38
|
+
--bizz-secondary-70: color-mix(in oklch, var(--bizz-secondary) 85%, black);
|
|
39
|
+
--bizz-secondary-80: color-mix(in oklch, var(--bizz-secondary) 65%, black);
|
|
40
|
+
--bizz-secondary-90: color-mix(in oklch, var(--bizz-secondary) 45%, black);
|
|
41
|
+
--bizz-secondary-100: color-mix(in oklch, var(--bizz-secondary) 25%, black);
|
|
42
|
+
|
|
43
|
+
/* ---- Success shades ---- */
|
|
44
|
+
--bizz-success-10: color-mix(in oklch, var(--bizz-success) 8%, white);
|
|
45
|
+
--bizz-success-20: color-mix(in oklch, var(--bizz-success) 18%, white);
|
|
46
|
+
--bizz-success-30: color-mix(in oklch, var(--bizz-success) 35%, white);
|
|
47
|
+
--bizz-success-40: color-mix(in oklch, var(--bizz-success) 55%, white);
|
|
48
|
+
--bizz-success-50: color-mix(in oklch, var(--bizz-success) 75%, white);
|
|
49
|
+
--bizz-success-60: var(--bizz-success);
|
|
50
|
+
--bizz-success-70: color-mix(in oklch, var(--bizz-success) 85%, black);
|
|
51
|
+
--bizz-success-80: color-mix(in oklch, var(--bizz-success) 65%, black);
|
|
52
|
+
--bizz-success-90: color-mix(in oklch, var(--bizz-success) 45%, black);
|
|
53
|
+
--bizz-success-100: color-mix(in oklch, var(--bizz-success) 25%, black);
|
|
54
|
+
|
|
55
|
+
/* ---- Warning shades ---- */
|
|
56
|
+
--bizz-warning-10: color-mix(in oklch, var(--bizz-warning) 8%, white);
|
|
57
|
+
--bizz-warning-20: color-mix(in oklch, var(--bizz-warning) 18%, white);
|
|
58
|
+
--bizz-warning-30: color-mix(in oklch, var(--bizz-warning) 35%, white);
|
|
59
|
+
--bizz-warning-40: color-mix(in oklch, var(--bizz-warning) 55%, white);
|
|
60
|
+
--bizz-warning-50: color-mix(in oklch, var(--bizz-warning) 75%, white);
|
|
61
|
+
--bizz-warning-60: var(--bizz-warning);
|
|
62
|
+
--bizz-warning-70: color-mix(in oklch, var(--bizz-warning) 85%, black);
|
|
63
|
+
--bizz-warning-80: color-mix(in oklch, var(--bizz-warning) 65%, black);
|
|
64
|
+
--bizz-warning-90: color-mix(in oklch, var(--bizz-warning) 45%, black);
|
|
65
|
+
--bizz-warning-100: color-mix(in oklch, var(--bizz-warning) 25%, black);
|
|
66
|
+
|
|
67
|
+
/* ---- Error shades ---- */
|
|
68
|
+
--bizz-error-10: color-mix(in oklch, var(--bizz-error) 8%, white);
|
|
69
|
+
--bizz-error-20: color-mix(in oklch, var(--bizz-error) 18%, white);
|
|
70
|
+
--bizz-error-30: color-mix(in oklch, var(--bizz-error) 35%, white);
|
|
71
|
+
--bizz-error-40: color-mix(in oklch, var(--bizz-error) 55%, white);
|
|
72
|
+
--bizz-error-50: color-mix(in oklch, var(--bizz-error) 75%, white);
|
|
73
|
+
--bizz-error-60: var(--bizz-error);
|
|
74
|
+
--bizz-error-70: color-mix(in oklch, var(--bizz-error) 85%, black);
|
|
75
|
+
--bizz-error-80: color-mix(in oklch, var(--bizz-error) 65%, black);
|
|
76
|
+
--bizz-error-90: color-mix(in oklch, var(--bizz-error) 45%, black);
|
|
77
|
+
--bizz-error-100: color-mix(in oklch, var(--bizz-error) 25%, black);
|
|
78
|
+
}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
/* ============================================
|
|
2
|
+
BIZZ DESIGN SYSTEM — DARK THEME
|
|
3
|
+
Only overrides semantic tokens.
|
|
4
|
+
Primitives (shades) are already available
|
|
5
|
+
from primitives.css via theme-light.css.
|
|
6
|
+
============================================ */
|
|
7
|
+
|
|
8
|
+
.bizz-theme-dark {
|
|
9
|
+
color-scheme: dark;
|
|
10
|
+
|
|
11
|
+
/* Background */
|
|
12
|
+
--bizz-background: var(--bizz-secondary-100);
|
|
13
|
+
--bizz-background-hover: color-mix(in oklch, var(--bizz-white) 12%, transparent);
|
|
14
|
+
--bizz-background-active: color-mix(in oklch, var(--bizz-white) 20%, transparent);
|
|
15
|
+
--bizz-background-selected: color-mix(in oklch, var(--bizz-white) 15%, transparent);
|
|
16
|
+
--bizz-background-inverse: var(--bizz-secondary-10);
|
|
17
|
+
--bizz-background-brand: var(--bizz-primary-60);
|
|
18
|
+
|
|
19
|
+
/* Layer */
|
|
20
|
+
--bizz-layer-01: var(--bizz-secondary-90);
|
|
21
|
+
--bizz-layer-02: var(--bizz-secondary-80);
|
|
22
|
+
--bizz-layer-03: var(--bizz-secondary-70);
|
|
23
|
+
--bizz-layer-hover-01: color-mix(in oklch, var(--bizz-secondary-90) 85%, white);
|
|
24
|
+
--bizz-layer-hover-02: color-mix(in oklch, var(--bizz-secondary-80) 85%, white);
|
|
25
|
+
--bizz-layer-active-01: var(--bizz-secondary-70);
|
|
26
|
+
--bizz-layer-active-02: var(--bizz-secondary-60);
|
|
27
|
+
--bizz-layer-selected-01: var(--bizz-secondary-80);
|
|
28
|
+
--bizz-layer-selected-02: var(--bizz-secondary-70);
|
|
29
|
+
--bizz-layer-selected-inverse: var(--bizz-secondary-10);
|
|
30
|
+
--bizz-layer-selected-disabled: var(--bizz-secondary-70);
|
|
31
|
+
|
|
32
|
+
/* Field */
|
|
33
|
+
--bizz-field-01: var(--bizz-secondary-90);
|
|
34
|
+
--bizz-field-02: var(--bizz-secondary-80);
|
|
35
|
+
--bizz-field-hover-01: color-mix(in oklch, var(--bizz-secondary-90) 85%, white);
|
|
36
|
+
--bizz-field-hover-02: color-mix(in oklch, var(--bizz-secondary-80) 85%, white);
|
|
37
|
+
|
|
38
|
+
/* Border */
|
|
39
|
+
--bizz-border-subtle-00: var(--bizz-secondary-80);
|
|
40
|
+
--bizz-border-subtle-01: var(--bizz-secondary-70);
|
|
41
|
+
--bizz-border-subtle-02: var(--bizz-secondary-60);
|
|
42
|
+
--bizz-border-strong-01: var(--bizz-secondary-60);
|
|
43
|
+
--bizz-border-strong-02: var(--bizz-secondary-50);
|
|
44
|
+
--bizz-border-inverse: var(--bizz-secondary-10);
|
|
45
|
+
--bizz-border-disabled: var(--bizz-secondary-70);
|
|
46
|
+
--bizz-border-interactive: var(--bizz-primary-50);
|
|
47
|
+
|
|
48
|
+
/* Text */
|
|
49
|
+
--bizz-text-primary: var(--bizz-secondary-10);
|
|
50
|
+
--bizz-text-secondary: var(--bizz-secondary-30);
|
|
51
|
+
--bizz-text-placeholder: var(--bizz-secondary-60);
|
|
52
|
+
--bizz-text-helper: var(--bizz-secondary-50);
|
|
53
|
+
--bizz-text-error: var(--bizz-error-40);
|
|
54
|
+
--bizz-text-on-color: var(--bizz-white);
|
|
55
|
+
--bizz-text-on-color-disabled: var(--bizz-secondary-70);
|
|
56
|
+
--bizz-text-inverse: var(--bizz-secondary-100);
|
|
57
|
+
--bizz-text-disabled: color-mix(in oklch, var(--bizz-secondary-10) 25%, transparent);
|
|
58
|
+
|
|
59
|
+
/* Link */
|
|
60
|
+
--bizz-link-primary: var(--bizz-primary-40);
|
|
61
|
+
--bizz-link-primary-hover: var(--bizz-primary-30);
|
|
62
|
+
--bizz-link-secondary: var(--bizz-primary-30);
|
|
63
|
+
--bizz-link-inverse: var(--bizz-primary-60);
|
|
64
|
+
|
|
65
|
+
/* Icon */
|
|
66
|
+
--bizz-icon-primary: var(--bizz-secondary-10);
|
|
67
|
+
--bizz-icon-secondary: var(--bizz-secondary-30);
|
|
68
|
+
--bizz-icon-on-color: var(--bizz-white);
|
|
69
|
+
--bizz-icon-interactive: var(--bizz-primary-40);
|
|
70
|
+
--bizz-icon-inverse: var(--bizz-secondary-100);
|
|
71
|
+
--bizz-icon-disabled: color-mix(in oklch, var(--bizz-secondary-10) 25%, transparent);
|
|
72
|
+
|
|
73
|
+
/* Support */
|
|
74
|
+
--bizz-support-error: var(--bizz-error-40);
|
|
75
|
+
--bizz-support-success: var(--bizz-success-40);
|
|
76
|
+
--bizz-support-warning: var(--bizz-warning-40);
|
|
77
|
+
--bizz-support-info: var(--bizz-primary-50);
|
|
78
|
+
--bizz-support-caution: var(--bizz-warning-40);
|
|
79
|
+
|
|
80
|
+
/* Button */
|
|
81
|
+
--bizz-button-primary: var(--bizz-primary-60);
|
|
82
|
+
--bizz-button-primary-hover: var(--bizz-primary-70);
|
|
83
|
+
--bizz-button-primary-active: var(--bizz-primary-80);
|
|
84
|
+
--bizz-button-secondary: var(--bizz-secondary-60);
|
|
85
|
+
--bizz-button-secondary-hover: var(--bizz-secondary-70);
|
|
86
|
+
--bizz-button-secondary-active: var(--bizz-secondary-80);
|
|
87
|
+
--bizz-button-tertiary: var(--bizz-white);
|
|
88
|
+
--bizz-button-tertiary-hover: var(--bizz-secondary-10);
|
|
89
|
+
--bizz-button-tertiary-active: var(--bizz-secondary-20);
|
|
90
|
+
--bizz-button-danger: var(--bizz-error-60);
|
|
91
|
+
--bizz-button-danger-hover: var(--bizz-error-70);
|
|
92
|
+
--bizz-button-danger-active: var(--bizz-error-80);
|
|
93
|
+
--bizz-button-disabled: var(--bizz-secondary-70);
|
|
94
|
+
--bizz-button-separator: var(--bizz-secondary-70);
|
|
95
|
+
|
|
96
|
+
/* Focus */
|
|
97
|
+
--bizz-focus: var(--bizz-white);
|
|
98
|
+
--bizz-focus-inset: var(--bizz-secondary-100);
|
|
99
|
+
--bizz-focus-inverse: var(--bizz-primary-60);
|
|
100
|
+
|
|
101
|
+
/* Tag */
|
|
102
|
+
--bizz-tag-primary-bg: var(--bizz-primary-80);
|
|
103
|
+
--bizz-tag-primary-text: var(--bizz-primary-30);
|
|
104
|
+
--bizz-tag-primary-hover: var(--bizz-primary-90);
|
|
105
|
+
--bizz-tag-secondary-bg: var(--bizz-secondary-80);
|
|
106
|
+
--bizz-tag-secondary-text: var(--bizz-secondary-10);
|
|
107
|
+
--bizz-tag-secondary-hover: var(--bizz-secondary-90);
|
|
108
|
+
--bizz-tag-success-bg: var(--bizz-success-80);
|
|
109
|
+
--bizz-tag-success-text: var(--bizz-success-30);
|
|
110
|
+
--bizz-tag-success-hover: var(--bizz-success-90);
|
|
111
|
+
--bizz-tag-warning-bg: var(--bizz-warning-80);
|
|
112
|
+
--bizz-tag-warning-text: var(--bizz-warning-20);
|
|
113
|
+
--bizz-tag-warning-hover: var(--bizz-warning-90);
|
|
114
|
+
--bizz-tag-error-bg: var(--bizz-error-80);
|
|
115
|
+
--bizz-tag-error-text: var(--bizz-error-30);
|
|
116
|
+
--bizz-tag-error-hover: var(--bizz-error-90);
|
|
117
|
+
}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
/* ============================================
|
|
2
|
+
BIZZ DESIGN SYSTEM — LIGHT THEME
|
|
3
|
+
============================================ */
|
|
4
|
+
|
|
5
|
+
@import './primitives.css';
|
|
6
|
+
|
|
7
|
+
.bizz-theme-light,
|
|
8
|
+
:root {
|
|
9
|
+
color-scheme: light;
|
|
10
|
+
|
|
11
|
+
/* Background */
|
|
12
|
+
--bizz-background: var(--bizz-white);
|
|
13
|
+
--bizz-background-hover: color-mix(in oklch, var(--bizz-secondary) 12%, transparent);
|
|
14
|
+
--bizz-background-active: color-mix(in oklch, var(--bizz-secondary) 30%, transparent);
|
|
15
|
+
--bizz-background-selected: color-mix(in oklch, var(--bizz-secondary) 20%, transparent);
|
|
16
|
+
--bizz-background-inverse: var(--bizz-secondary-80);
|
|
17
|
+
--bizz-background-brand: var(--bizz-primary-60);
|
|
18
|
+
|
|
19
|
+
/* Layer */
|
|
20
|
+
--bizz-layer-01: var(--bizz-secondary-10);
|
|
21
|
+
--bizz-layer-02: var(--bizz-white);
|
|
22
|
+
--bizz-layer-03: var(--bizz-secondary-10);
|
|
23
|
+
--bizz-layer-hover-01: var(--bizz-secondary-20);
|
|
24
|
+
--bizz-layer-hover-02: var(--bizz-secondary-20);
|
|
25
|
+
--bizz-layer-active-01: var(--bizz-secondary-30);
|
|
26
|
+
--bizz-layer-active-02: var(--bizz-secondary-30);
|
|
27
|
+
--bizz-layer-selected-01: var(--bizz-secondary-20);
|
|
28
|
+
--bizz-layer-selected-02: var(--bizz-secondary-20);
|
|
29
|
+
--bizz-layer-selected-inverse: var(--bizz-secondary-100);
|
|
30
|
+
--bizz-layer-selected-disabled: var(--bizz-secondary-50);
|
|
31
|
+
|
|
32
|
+
/* Field */
|
|
33
|
+
--bizz-field-01: var(--bizz-secondary-10);
|
|
34
|
+
--bizz-field-02: var(--bizz-white);
|
|
35
|
+
--bizz-field-hover-01: var(--bizz-secondary-20);
|
|
36
|
+
--bizz-field-hover-02: var(--bizz-secondary-20);
|
|
37
|
+
|
|
38
|
+
/* Border */
|
|
39
|
+
--bizz-border-subtle-00: var(--bizz-secondary-20);
|
|
40
|
+
--bizz-border-subtle-01: var(--bizz-secondary-30);
|
|
41
|
+
--bizz-border-subtle-02: var(--bizz-secondary-20);
|
|
42
|
+
--bizz-border-strong-01: var(--bizz-secondary-50);
|
|
43
|
+
--bizz-border-strong-02: var(--bizz-secondary-50);
|
|
44
|
+
--bizz-border-inverse: var(--bizz-secondary-100);
|
|
45
|
+
--bizz-border-disabled: var(--bizz-secondary-30);
|
|
46
|
+
--bizz-border-interactive: var(--bizz-primary-60);
|
|
47
|
+
|
|
48
|
+
/* Text */
|
|
49
|
+
--bizz-text-primary: var(--bizz-secondary-100);
|
|
50
|
+
--bizz-text-secondary: var(--bizz-secondary-70);
|
|
51
|
+
--bizz-text-placeholder: var(--bizz-secondary-40);
|
|
52
|
+
--bizz-text-helper: var(--bizz-secondary-60);
|
|
53
|
+
--bizz-text-error: var(--bizz-error-60);
|
|
54
|
+
--bizz-text-on-color: var(--bizz-white);
|
|
55
|
+
--bizz-text-on-color-disabled: var(--bizz-secondary-50);
|
|
56
|
+
--bizz-text-inverse: var(--bizz-white);
|
|
57
|
+
--bizz-text-disabled: color-mix(in oklch, var(--bizz-secondary-100) 25%, transparent);
|
|
58
|
+
|
|
59
|
+
/* Link */
|
|
60
|
+
--bizz-link-primary: var(--bizz-primary-60);
|
|
61
|
+
--bizz-link-primary-hover: var(--bizz-primary-80);
|
|
62
|
+
--bizz-link-secondary: var(--bizz-primary-80);
|
|
63
|
+
--bizz-link-inverse: var(--bizz-primary-40);
|
|
64
|
+
|
|
65
|
+
/* Icon */
|
|
66
|
+
--bizz-icon-primary: var(--bizz-secondary-100);
|
|
67
|
+
--bizz-icon-secondary: var(--bizz-secondary-70);
|
|
68
|
+
--bizz-icon-on-color: var(--bizz-white);
|
|
69
|
+
--bizz-icon-interactive: var(--bizz-primary-60);
|
|
70
|
+
--bizz-icon-inverse: var(--bizz-white);
|
|
71
|
+
--bizz-icon-disabled: color-mix(in oklch, var(--bizz-secondary-100) 25%, transparent);
|
|
72
|
+
|
|
73
|
+
/* Support */
|
|
74
|
+
--bizz-support-error: var(--bizz-error-60);
|
|
75
|
+
--bizz-support-success: var(--bizz-success-60);
|
|
76
|
+
--bizz-support-warning: var(--bizz-warning-60);
|
|
77
|
+
--bizz-support-info: var(--bizz-primary-80);
|
|
78
|
+
--bizz-support-caution: var(--bizz-warning-70);
|
|
79
|
+
|
|
80
|
+
/* Button */
|
|
81
|
+
--bizz-button-primary: var(--bizz-primary-60);
|
|
82
|
+
--bizz-button-primary-hover: var(--bizz-primary-70);
|
|
83
|
+
--bizz-button-primary-active: var(--bizz-primary-80);
|
|
84
|
+
--bizz-button-secondary: var(--bizz-secondary-80);
|
|
85
|
+
--bizz-button-secondary-hover: var(--bizz-secondary-90);
|
|
86
|
+
--bizz-button-secondary-active: var(--bizz-secondary-60);
|
|
87
|
+
--bizz-button-tertiary: var(--bizz-primary-60);
|
|
88
|
+
--bizz-button-tertiary-hover: var(--bizz-primary-70);
|
|
89
|
+
--bizz-button-tertiary-active: var(--bizz-primary-80);
|
|
90
|
+
--bizz-button-danger: var(--bizz-error-60);
|
|
91
|
+
--bizz-button-danger-hover: var(--bizz-error-70);
|
|
92
|
+
--bizz-button-danger-active: var(--bizz-error-80);
|
|
93
|
+
--bizz-button-disabled: var(--bizz-secondary-30);
|
|
94
|
+
--bizz-button-separator: var(--bizz-secondary-20);
|
|
95
|
+
|
|
96
|
+
/* Focus */
|
|
97
|
+
--bizz-focus: var(--bizz-primary-60);
|
|
98
|
+
--bizz-focus-inset: var(--bizz-white);
|
|
99
|
+
--bizz-focus-inverse: var(--bizz-white);
|
|
100
|
+
|
|
101
|
+
/* Tag */
|
|
102
|
+
--bizz-tag-primary-bg: var(--bizz-primary-20);
|
|
103
|
+
--bizz-tag-primary-text: var(--bizz-primary-80);
|
|
104
|
+
--bizz-tag-primary-hover: var(--bizz-primary-30);
|
|
105
|
+
--bizz-tag-secondary-bg: var(--bizz-secondary-20);
|
|
106
|
+
--bizz-tag-secondary-text: var(--bizz-secondary-100);
|
|
107
|
+
--bizz-tag-secondary-hover: var(--bizz-secondary-30);
|
|
108
|
+
--bizz-tag-success-bg: var(--bizz-success-20);
|
|
109
|
+
--bizz-tag-success-text: var(--bizz-success-80);
|
|
110
|
+
--bizz-tag-success-hover: var(--bizz-success-30);
|
|
111
|
+
--bizz-tag-warning-bg: var(--bizz-warning-20);
|
|
112
|
+
--bizz-tag-warning-text: var(--bizz-warning-80);
|
|
113
|
+
--bizz-tag-warning-hover: var(--bizz-warning-30);
|
|
114
|
+
--bizz-tag-error-bg: var(--bizz-error-20);
|
|
115
|
+
--bizz-tag-error-text: var(--bizz-error-80);
|
|
116
|
+
--bizz-tag-error-hover: var(--bizz-error-30);
|
|
117
|
+
}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
/* ============================================
|
|
2
|
+
BIZZ DESIGN SYSTEM — BASE TOKENS
|
|
3
|
+
Non-color tokens: typography, spacing, radius,
|
|
4
|
+
shadows, transitions.
|
|
5
|
+
Color tokens live in themes/theme-light.css
|
|
6
|
+
and themes/theme-dark.css.
|
|
7
|
+
============================================ */
|
|
8
|
+
|
|
9
|
+
@import '../themes/theme-light.css';
|
|
10
|
+
|
|
11
|
+
:root {
|
|
12
|
+
|
|
13
|
+
/* ---- Typography ---- */
|
|
14
|
+
--bizz-font-family-base: 'IBM Plex Sans', 'Inter', system-ui, -apple-system, sans-serif;
|
|
15
|
+
--bizz-font-family-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
|
|
16
|
+
|
|
17
|
+
--bizz-font-size-xs: 0.75rem; /* 12px */
|
|
18
|
+
--bizz-font-size-sm: 0.875rem; /* 14px */
|
|
19
|
+
--bizz-font-size-md: 1rem; /* 16px */
|
|
20
|
+
--bizz-font-size-lg: 1.125rem; /* 18px */
|
|
21
|
+
--bizz-font-size-xl: 1.25rem; /* 20px */
|
|
22
|
+
--bizz-font-size-2xl: 1.5rem; /* 24px */
|
|
23
|
+
--bizz-font-size-3xl: 1.875rem; /* 30px */
|
|
24
|
+
--bizz-font-size-4xl: 2.25rem; /* 36px */
|
|
25
|
+
--bizz-font-size-5xl: 3rem; /* 48px */
|
|
26
|
+
|
|
27
|
+
--bizz-font-weight-regular: 400;
|
|
28
|
+
--bizz-font-weight-medium: 500;
|
|
29
|
+
--bizz-font-weight-semibold: 600;
|
|
30
|
+
--bizz-font-weight-bold: 700;
|
|
31
|
+
--bizz-font-weight-extrabold: 800;
|
|
32
|
+
|
|
33
|
+
--bizz-line-height-tight: 1.2;
|
|
34
|
+
--bizz-line-height-snug: 1.35;
|
|
35
|
+
--bizz-line-height-normal: 1.5;
|
|
36
|
+
--bizz-line-height-relaxed: 1.75;
|
|
37
|
+
|
|
38
|
+
--bizz-letter-spacing-tight: -0.03em;
|
|
39
|
+
--bizz-letter-spacing-snug: -0.02em;
|
|
40
|
+
--bizz-letter-spacing-normal: 0em;
|
|
41
|
+
--bizz-letter-spacing-wide: 0.05em;
|
|
42
|
+
--bizz-letter-spacing-wider: 0.1em;
|
|
43
|
+
|
|
44
|
+
/* ---- Spacing ---- */
|
|
45
|
+
--bizz-spacing-01: 0.125rem; /* 2px */
|
|
46
|
+
--bizz-spacing-02: 0.25rem; /* 4px */
|
|
47
|
+
--bizz-spacing-03: 0.5rem; /* 8px */
|
|
48
|
+
--bizz-spacing-04: 0.75rem; /* 12px */
|
|
49
|
+
--bizz-spacing-05: 1rem; /* 16px */
|
|
50
|
+
--bizz-spacing-06: 1.5rem; /* 24px */
|
|
51
|
+
--bizz-spacing-07: 2rem; /* 32px */
|
|
52
|
+
--bizz-spacing-08: 2.5rem; /* 40px */
|
|
53
|
+
--bizz-spacing-09: 3rem; /* 48px */
|
|
54
|
+
--bizz-spacing-10: 4rem; /* 64px */
|
|
55
|
+
--bizz-spacing-11: 5rem; /* 80px */
|
|
56
|
+
--bizz-spacing-12: 6rem; /* 96px */
|
|
57
|
+
--bizz-spacing-13: 10rem; /* 160px */
|
|
58
|
+
|
|
59
|
+
/* ---- Border radius ---- */
|
|
60
|
+
--bizz-radius-sm: 0.125rem;
|
|
61
|
+
--bizz-radius-md: 0.25rem;
|
|
62
|
+
--bizz-radius-lg: 0.5rem;
|
|
63
|
+
--bizz-radius-xl: 1rem;
|
|
64
|
+
--bizz-radius-full: 9999px;
|
|
65
|
+
|
|
66
|
+
/* ---- Shadows ---- */
|
|
67
|
+
--bizz-shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
|
|
68
|
+
--bizz-shadow-md: 0 2px 6px rgba(0,0,0,0.20), 0 1px 2px rgba(0,0,0,0.08);
|
|
69
|
+
--bizz-shadow-lg: 0 8px 24px rgba(0,0,0,0.16), 0 2px 6px rgba(0,0,0,0.08);
|
|
70
|
+
--bizz-shadow-xl: 0 16px 48px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.08);
|
|
71
|
+
|
|
72
|
+
/* ---- Transitions ---- */
|
|
73
|
+
--bizz-duration-fast: 100ms;
|
|
74
|
+
--bizz-duration-base: 200ms;
|
|
75
|
+
--bizz-duration-slow: 300ms;
|
|
76
|
+
--bizz-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* ---- Global base styles ---- */
|
|
80
|
+
/* Sets the font on body so all elements inherit it */
|
|
81
|
+
body {
|
|
82
|
+
font-family: var(--bizz-font-family-base);
|
|
83
|
+
color: var(--bizz-text-primary);
|
|
84
|
+
background-color: var(--bizz-background);
|
|
85
|
+
}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
/* ============================================
|
|
2
|
+
BIZZ DESIGN SYSTEM — TYPOGRAPHY UTILITIES
|
|
3
|
+
Apply directly to any HTML element.
|
|
4
|
+
Example: <h1 class="bizz-h1">Title</h1>
|
|
5
|
+
<p class="bizz-body bizz-text-secondary">...</p>
|
|
6
|
+
============================================ */
|
|
7
|
+
|
|
8
|
+
.bizz-h1,
|
|
9
|
+
.bizz-h2,
|
|
10
|
+
.bizz-h3,
|
|
11
|
+
.bizz-h4,
|
|
12
|
+
.bizz-body-lg,
|
|
13
|
+
.bizz-body,
|
|
14
|
+
.bizz-body-sm,
|
|
15
|
+
.bizz-label,
|
|
16
|
+
.bizz-caption,
|
|
17
|
+
.bizz-overline {
|
|
18
|
+
font-family: var(--bizz-font-family-base);
|
|
19
|
+
margin: 0;
|
|
20
|
+
padding: 0;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* --- Variants --- */
|
|
24
|
+
|
|
25
|
+
.bizz-h1 {
|
|
26
|
+
font-size: var(--bizz-font-size-5xl);
|
|
27
|
+
font-weight: var(--bizz-font-weight-extrabold);
|
|
28
|
+
line-height: var(--bizz-line-height-tight);
|
|
29
|
+
letter-spacing: var(--bizz-letter-spacing-tight);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.bizz-h2 {
|
|
33
|
+
font-size: var(--bizz-font-size-4xl);
|
|
34
|
+
font-weight: var(--bizz-font-weight-bold);
|
|
35
|
+
line-height: var(--bizz-line-height-tight);
|
|
36
|
+
letter-spacing: var(--bizz-letter-spacing-snug);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.bizz-h3 {
|
|
40
|
+
font-size: var(--bizz-font-size-3xl);
|
|
41
|
+
font-weight: var(--bizz-font-weight-bold);
|
|
42
|
+
line-height: var(--bizz-line-height-snug);
|
|
43
|
+
letter-spacing: var(--bizz-letter-spacing-snug);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.bizz-h4 {
|
|
47
|
+
font-size: var(--bizz-font-size-2xl);
|
|
48
|
+
font-weight: var(--bizz-font-weight-semibold);
|
|
49
|
+
line-height: var(--bizz-line-height-snug);
|
|
50
|
+
letter-spacing: var(--bizz-letter-spacing-normal);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.bizz-body-lg {
|
|
54
|
+
font-size: var(--bizz-font-size-lg);
|
|
55
|
+
font-weight: var(--bizz-font-weight-regular);
|
|
56
|
+
line-height: var(--bizz-line-height-relaxed);
|
|
57
|
+
letter-spacing: var(--bizz-letter-spacing-normal);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.bizz-body {
|
|
61
|
+
font-size: var(--bizz-font-size-md);
|
|
62
|
+
font-weight: var(--bizz-font-weight-regular);
|
|
63
|
+
line-height: var(--bizz-line-height-normal);
|
|
64
|
+
letter-spacing: var(--bizz-letter-spacing-normal);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.bizz-body-sm {
|
|
68
|
+
font-size: var(--bizz-font-size-sm);
|
|
69
|
+
font-weight: var(--bizz-font-weight-regular);
|
|
70
|
+
line-height: var(--bizz-line-height-normal);
|
|
71
|
+
letter-spacing: var(--bizz-letter-spacing-normal);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.bizz-label {
|
|
75
|
+
font-size: var(--bizz-font-size-sm);
|
|
76
|
+
font-weight: var(--bizz-font-weight-semibold);
|
|
77
|
+
line-height: var(--bizz-line-height-normal);
|
|
78
|
+
letter-spacing: var(--bizz-letter-spacing-normal);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.bizz-caption {
|
|
82
|
+
font-size: var(--bizz-font-size-xs);
|
|
83
|
+
font-weight: var(--bizz-font-weight-regular);
|
|
84
|
+
line-height: var(--bizz-line-height-normal);
|
|
85
|
+
letter-spacing: var(--bizz-letter-spacing-normal);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.bizz-overline {
|
|
89
|
+
font-size: var(--bizz-font-size-xs);
|
|
90
|
+
font-weight: var(--bizz-font-weight-bold);
|
|
91
|
+
line-height: var(--bizz-line-height-normal);
|
|
92
|
+
letter-spacing: var(--bizz-letter-spacing-wider);
|
|
93
|
+
text-transform: uppercase;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* --- Color utilities --- */
|
|
97
|
+
|
|
98
|
+
.bizz-text-primary { color: var(--bizz-text-primary); }
|
|
99
|
+
.bizz-text-secondary { color: var(--bizz-text-secondary); }
|
|
100
|
+
.bizz-text-disabled { color: var(--bizz-text-disabled); }
|
|
101
|
+
.bizz-text-inverse { color: var(--bizz-text-inverse); }
|
|
102
|
+
.bizz-text-brand { color: var(--bizz-link-primary); }
|
|
103
|
+
.bizz-text-error { color: var(--bizz-text-error); }
|
|
104
|
+
.bizz-text-success { color: var(--bizz-support-success); }
|
|
105
|
+
.bizz-text-warning { color: var(--bizz-support-warning); }
|