@licklist/design 0.78.5-dev.34 → 0.78.5-dev.35
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/dist/v2/components/Tooltip/Tooltip.d.ts +5 -4
- package/dist/v2/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/v2/styles/components/Button.scss +168 -0
- package/dist/v2/styles/form/NewInput.scss +172 -0
- package/dist/v2/styles/index.scss +4 -0
- package/dist/v2/styles/navigation/Navigation.scss +17 -0
- package/dist/v2/styles/navigation/NavigationItem.scss +86 -0
- package/dist/v2/styles/navigation/NavigationSection.scss +26 -0
- package/dist/v2/styles/navigation/_index.scss +9 -0
- package/dist/v2/styles/tokens/_colors.scss +554 -0
- package/dist/v2/styles/tokens/_sizes.scss +122 -0
- package/dist/v2/styles/tokens/_status.scss +108 -0
- package/dist/v2/styles/tokens/_typography.scss +146 -0
- package/package.json +2 -1
- package/rollup.config.js +1 -0
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
/* Status/Alert Color tokens derived from Figma Alerts & Errors page
|
|
2
|
+
* Spec: https://www.figma.com/design/HPb8SEwQH2rrFAD2sRlKei/BKIT---Booked-Kit?node-id=167:968
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
/* Success/Green Status Colors */
|
|
7
|
+
--color-success-fill: #2d6b18;
|
|
8
|
+
--color-success-background: #eef9ea;
|
|
9
|
+
--color-success-border: #c9ecbd;
|
|
10
|
+
|
|
11
|
+
/* Error/Red Status Colors */
|
|
12
|
+
--color-error-fill: #cc3c35;
|
|
13
|
+
--color-error-background: #fceceb;
|
|
14
|
+
--color-error-border: #f5c4c2;
|
|
15
|
+
|
|
16
|
+
/* Alert/Warning/Yellow Status Colors */
|
|
17
|
+
--color-alert-fill: #fd7e14;
|
|
18
|
+
--color-alert-background: #fcf6e7;
|
|
19
|
+
--color-alert-border: #f6e3b4;
|
|
20
|
+
|
|
21
|
+
/* Info/Blue Status Colors */
|
|
22
|
+
--color-info-fill: #0e8ce2;
|
|
23
|
+
--color-info-background: #e7f4fc;
|
|
24
|
+
--color-info-border: #b4dbf6;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* Legacy format for compatibility with existing alias system */
|
|
28
|
+
:root {
|
|
29
|
+
/* Surfaces - Status backgrounds */
|
|
30
|
+
--surfaces-status-background-success: var(--color-success-background);
|
|
31
|
+
--surfaces-status-background-error: var(--color-error-background);
|
|
32
|
+
--surfaces-status-background-alert: var(--color-alert-background);
|
|
33
|
+
--surfaces-status-background-info: var(--color-info-background);
|
|
34
|
+
|
|
35
|
+
/* Borders - Status borders */
|
|
36
|
+
--borders-status-border-success: var(--color-success-border);
|
|
37
|
+
--borders-status-border-error: var(--color-error-border);
|
|
38
|
+
--borders-status-border-alert: var(--color-alert-border);
|
|
39
|
+
--borders-status-border-info: var(--color-info-border);
|
|
40
|
+
|
|
41
|
+
/* Fills - Status icons/text */
|
|
42
|
+
--fills-status-fill-success: var(--color-success-fill);
|
|
43
|
+
--fills-status-fill-error: var(--color-error-fill);
|
|
44
|
+
--fills-status-fill-alert: var(--color-alert-fill);
|
|
45
|
+
--fills-status-fill-info: var(--color-info-fill);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* SCSS Map for status colors */
|
|
49
|
+
$status-colors: (
|
|
50
|
+
success: (
|
|
51
|
+
fill: var(--color-success-fill),
|
|
52
|
+
background: var(--color-success-background),
|
|
53
|
+
border: var(--color-success-border)
|
|
54
|
+
),
|
|
55
|
+
error: (
|
|
56
|
+
fill: var(--color-error-fill),
|
|
57
|
+
background: var(--color-error-background),
|
|
58
|
+
border: var(--color-error-border)
|
|
59
|
+
),
|
|
60
|
+
alert: (
|
|
61
|
+
fill: var(--color-alert-fill),
|
|
62
|
+
background: var(--color-alert-background),
|
|
63
|
+
border: var(--color-alert-border)
|
|
64
|
+
),
|
|
65
|
+
info: (
|
|
66
|
+
fill: var(--color-info-fill),
|
|
67
|
+
background: var(--color-info-background),
|
|
68
|
+
border: var(--color-info-border)
|
|
69
|
+
)
|
|
70
|
+
);
|
|
71
|
+
|
|
72
|
+
/* Mixins for status colors */
|
|
73
|
+
@mixin status-success() {
|
|
74
|
+
background-color: var(--surfaces-status-background-success);
|
|
75
|
+
border-color: var(--borders-status-border-success);
|
|
76
|
+
color: var(--fills-status-fill-success);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
@mixin status-error() {
|
|
80
|
+
background-color: var(--surfaces-status-background-error);
|
|
81
|
+
border-color: var(--borders-status-border-error);
|
|
82
|
+
color: var(--fills-status-fill-error);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@mixin status-alert() {
|
|
86
|
+
background-color: var(--surfaces-status-background-alert);
|
|
87
|
+
border-color: var(--borders-status-border-alert);
|
|
88
|
+
color: var(--fills-status-fill-alert);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@mixin status-info() {
|
|
92
|
+
background-color: var(--surfaces-status-background-info);
|
|
93
|
+
border-color: var(--borders-status-border-info);
|
|
94
|
+
color: var(--fills-status-fill-info);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* Helper mixin for getting status colors */
|
|
98
|
+
@function get-status-color($status, $type) {
|
|
99
|
+
$status-map: map-get($status-colors, $status);
|
|
100
|
+
@if $status-map {
|
|
101
|
+
$color: map-get($status-map, $type);
|
|
102
|
+
@if $color {
|
|
103
|
+
@return $color;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
@warn "Unknown status color: #{$status}.#{$type}";
|
|
107
|
+
@return null;
|
|
108
|
+
}
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
/* Typography tokens and mixins derived from Figma
|
|
2
|
+
* Spec: https://www.figma.com/design/HPb8SEwQH2rrFAD2sRlKei/BKIT---Booked-Kit?node-id=30-95&m=dev
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
/* Families */
|
|
7
|
+
--font-family-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
|
8
|
+
--font-family-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|
9
|
+
|
|
10
|
+
/* Headings Desktop */
|
|
11
|
+
--heading-xxl-size: 44px;
|
|
12
|
+
--heading-xxl-line: 48px;
|
|
13
|
+
--heading-xxl-weight: 600;
|
|
14
|
+
--heading-xl-size: 32px;
|
|
15
|
+
--heading-xl-line: 36px;
|
|
16
|
+
--heading-xl-weight: 700;
|
|
17
|
+
--heading-h1-size: 24px;
|
|
18
|
+
--heading-h1-line: 28px;
|
|
19
|
+
--heading-h1-weight: 600;
|
|
20
|
+
--heading-h2-size: 20px;
|
|
21
|
+
--heading-h2-line: 24px;
|
|
22
|
+
--heading-h2-weight: 600;
|
|
23
|
+
--heading-h3-size: 17px;
|
|
24
|
+
--heading-h3-line: 20px;
|
|
25
|
+
--heading-h3-weight: 600;
|
|
26
|
+
--heading-h4-size: 15px;
|
|
27
|
+
--heading-h4-line: 18px;
|
|
28
|
+
--heading-h4-weight: 600;
|
|
29
|
+
--heading-h5-size: 13px;
|
|
30
|
+
--heading-h5-line: 16px;
|
|
31
|
+
--heading-h5-weight: 500;
|
|
32
|
+
--heading-h6-size: 11px;
|
|
33
|
+
--heading-h6-line: 14px;
|
|
34
|
+
--heading-h6-weight: 500;
|
|
35
|
+
|
|
36
|
+
/* Headings Mobile */
|
|
37
|
+
--heading-xxl-mobile-size: 32px;
|
|
38
|
+
--heading-xxl-mobile-line: 36px;
|
|
39
|
+
--heading-xxl-mobile-weight: 600;
|
|
40
|
+
--heading-xl-mobile-size: 26px;
|
|
41
|
+
--heading-xl-mobile-line: 30px;
|
|
42
|
+
--heading-xl-mobile-weight: 700;
|
|
43
|
+
--heading-h1-mobile-size: 20px;
|
|
44
|
+
--heading-h1-mobile-line: 23px;
|
|
45
|
+
--heading-h1-mobile-weight: 600;
|
|
46
|
+
--heading-h2-mobile-size: 18px;
|
|
47
|
+
--heading-h2-mobile-line: 22px;
|
|
48
|
+
--heading-h2-mobile-weight: 600;
|
|
49
|
+
--heading-h3-mobile-size: 16px;
|
|
50
|
+
--heading-h3-mobile-line: 18px;
|
|
51
|
+
--heading-h3-mobile-weight: 600;
|
|
52
|
+
--heading-h4-mobile-size: 14px;
|
|
53
|
+
--heading-h4-mobile-line: 16px;
|
|
54
|
+
--heading-h4-mobile-weight: 600;
|
|
55
|
+
--heading-h5-mobile-size: 13px;
|
|
56
|
+
--heading-h5-mobile-line: 16px;
|
|
57
|
+
--heading-h5-mobile-weight: 500;
|
|
58
|
+
--heading-h6-mobile-size: 11px;
|
|
59
|
+
--heading-h6-mobile-line: 14px;
|
|
60
|
+
--heading-h6-mobile-weight: 500;
|
|
61
|
+
|
|
62
|
+
/* Body Desktop */
|
|
63
|
+
--text-xl-size: 20px;
|
|
64
|
+
--text-xl-line: 26px;
|
|
65
|
+
--text-xl-weight: 400;
|
|
66
|
+
--text-large-size: 18px;
|
|
67
|
+
--text-large-line: 24px;
|
|
68
|
+
--text-large-weight: 400;
|
|
69
|
+
--text-regular-size: 15px;
|
|
70
|
+
--text-regular-line: 20px;
|
|
71
|
+
--text-regular-weight: 400;
|
|
72
|
+
--text-small-size: 13px;
|
|
73
|
+
--text-small-line: 16px;
|
|
74
|
+
--text-small-weight: 400;
|
|
75
|
+
--text-small-emphasis-weight: 500;
|
|
76
|
+
--text-small-bold-weight: 600;
|
|
77
|
+
--text-xs-size: 10px;
|
|
78
|
+
--text-xs-line: 13px;
|
|
79
|
+
--text-xs-weight: 500;
|
|
80
|
+
--text-xs-bold-weight: 600;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/* Breakpoint: adjust if your system uses different breakpoints */
|
|
84
|
+
$bp-mobile-max: 767px;
|
|
85
|
+
|
|
86
|
+
/* Map of variants to CSS variable tuples: (size, line, weight) */
|
|
87
|
+
$typo-map: (
|
|
88
|
+
'heading.xxl': (var(--heading-xxl-size), var(--heading-xxl-line), var(--heading-xxl-weight), var(--font-family-sans)),
|
|
89
|
+
'heading.xl': (var(--heading-xl-size), var(--heading-xl-line), var(--heading-xl-weight), var(--font-family-sans)),
|
|
90
|
+
'heading.h1': (var(--heading-h1-size), var(--heading-h1-line), var(--heading-h1-weight), var(--font-family-sans)),
|
|
91
|
+
'heading.h2': (var(--heading-h2-size), var(--heading-h2-line), var(--heading-h2-weight), var(--font-family-sans)),
|
|
92
|
+
'heading.h3': (var(--heading-h3-size), var(--heading-h3-line), var(--heading-h3-weight), var(--font-family-sans)),
|
|
93
|
+
'heading.h4': (var(--heading-h4-size), var(--heading-h4-line), var(--heading-h4-weight), var(--font-family-sans)),
|
|
94
|
+
'heading.h5': (var(--heading-h5-size), var(--heading-h5-line), var(--heading-h5-weight), var(--font-family-sans)),
|
|
95
|
+
'heading.h6': (var(--heading-h6-size), var(--heading-h6-line), var(--heading-h6-weight), var(--font-family-sans)),
|
|
96
|
+
|
|
97
|
+
'heading.xxl.mobile': (var(--heading-xxl-mobile-size), var(--heading-xxl-mobile-line), var(--heading-xxl-mobile-weight), var(--font-family-sans)),
|
|
98
|
+
'heading.xl.mobile': (var(--heading-xl-mobile-size), var(--heading-xl-mobile-line), var(--heading-xl-mobile-weight), var(--font-family-sans)),
|
|
99
|
+
'heading.h1.mobile': (var(--heading-h1-mobile-size), var(--heading-h1-mobile-line), var(--heading-h1-mobile-weight), var(--font-family-sans)),
|
|
100
|
+
'heading.h2.mobile': (var(--heading-h2-mobile-size), var(--heading-h2-mobile-line), var(--heading-h2-mobile-weight), var(--font-family-sans)),
|
|
101
|
+
'heading.h3.mobile': (var(--heading-h3-mobile-size), var(--heading-h3-mobile-line), var(--heading-h3-mobile-weight), var(--font-family-sans)),
|
|
102
|
+
'heading.h4.mobile': (var(--heading-h4-mobile-size), var(--heading-h4-mobile-line), var(--heading-h4-mobile-weight), var(--font-family-sans)),
|
|
103
|
+
'heading.h5.mobile': (var(--heading-h5-mobile-size), var(--heading-h5-mobile-line), var(--heading-h5-mobile-weight), var(--font-family-sans)),
|
|
104
|
+
'heading.h6.mobile': (var(--heading-h6-mobile-size), var(--heading-h6-mobile-line), var(--heading-h6-mobile-weight), var(--font-family-sans)),
|
|
105
|
+
|
|
106
|
+
'text.xl': (var(--text-xl-size), var(--text-xl-line), var(--text-xl-weight), var(--font-family-sans)),
|
|
107
|
+
'text.large': (var(--text-large-size), var(--text-large-line), var(--text-large-weight), var(--font-family-sans)),
|
|
108
|
+
'text.regular': (var(--text-regular-size), var(--text-regular-line), var(--text-regular-weight), var(--font-family-sans)),
|
|
109
|
+
'text.small': (var(--text-small-size), var(--text-small-line), var(--text-small-weight), var(--font-family-sans)),
|
|
110
|
+
'text.small.emphasis': (var(--text-small-size), var(--text-small-line), var(--text-small-emphasis-weight), var(--font-family-sans)),
|
|
111
|
+
'text.small.bold': (var(--text-small-size), var(--text-small-line), var(--text-small-bold-weight), var(--font-family-sans)),
|
|
112
|
+
'text.xs': (var(--text-xs-size), var(--text-xs-line), var(--text-xs-weight), var(--font-family-sans)),
|
|
113
|
+
'text.xs.bold': (var(--text-xs-size), var(--text-xs-line), var(--text-xs-bold-weight), var(--font-family-sans))
|
|
114
|
+
);
|
|
115
|
+
|
|
116
|
+
@mixin apply-typo($tuple) {
|
|
117
|
+
$size: nth($tuple, 1);
|
|
118
|
+
$line: nth($tuple, 2);
|
|
119
|
+
$weight: nth($tuple, 3);
|
|
120
|
+
$family: nth($tuple, 4);
|
|
121
|
+
font-family: $family;
|
|
122
|
+
font-size: $size;
|
|
123
|
+
line-height: $line;
|
|
124
|
+
font-weight: $weight;
|
|
125
|
+
color: var(--labels-main-label-primary, #121E52);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
@mixin typography($variant) {
|
|
129
|
+
@if map-has-key($typo-map, $variant) {
|
|
130
|
+
@include apply-typo(map-get($typo-map, $variant));
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
@else {
|
|
134
|
+
/* Fallback to regular text */
|
|
135
|
+
@include apply-typo(map-get($typo-map, 'text.regular'));
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* Convenience mixin that switches to mobile variant under mobile breakpoint */
|
|
140
|
+
@mixin responsive-heading($desktopVariant, $mobileVariant) {
|
|
141
|
+
@include typography($desktopVariant);
|
|
142
|
+
|
|
143
|
+
@media (max-width: $bp-mobile-max) {
|
|
144
|
+
@include typography($mobileVariant);
|
|
145
|
+
}
|
|
146
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@licklist/design",
|
|
3
|
-
"version": "0.78.5-dev.
|
|
3
|
+
"version": "0.78.5-dev.35",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
|
|
@@ -71,6 +71,7 @@
|
|
|
71
71
|
"@mantine/hooks": "6.0.22",
|
|
72
72
|
"@mdx-js/react": "1.6.22",
|
|
73
73
|
"@popperjs/core": "2.11.8",
|
|
74
|
+
"@radix-ui/react-tooltip": "^1.2.8",
|
|
74
75
|
"@react-aria/utils": "3.9.0",
|
|
75
76
|
"@svgr/webpack": "^6.5.1",
|
|
76
77
|
"@tanstack/react-table": "8.10.6",
|
package/rollup.config.js
CHANGED