bizz-components 0.1.0 → 0.2.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 +165 -121
- package/package.json +20 -26
- package/web/index.d.mts +227 -0
- package/web/index.js +1868 -0
- package/fesm2022/bizz-components.mjs +0 -222
- package/fesm2022/bizz-components.mjs.map +0 -1
- package/index.d.ts +0 -100
- package/src/lib/themes/primitives.css +0 -78
- package/src/lib/themes/theme-dark.css +0 -117
- package/src/lib/themes/theme-light.css +0 -117
- package/src/lib/tokens/tokens.css +0 -85
- package/src/lib/tokens/typography.css +0 -105
|
@@ -1,117 +0,0 @@
|
|
|
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
|
-
}
|
|
@@ -1,117 +0,0 @@
|
|
|
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
|
-
}
|
|
@@ -1,85 +0,0 @@
|
|
|
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
|
-
}
|
|
@@ -1,105 +0,0 @@
|
|
|
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); }
|