@chekinapp/tokens 0.0.1 → 0.0.3
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 +90 -0
- package/package.json +4 -2
- package/src/base/breakpoints.css +8 -0
- package/src/base/colors.css +35 -0
- package/src/base/components.css +68 -0
- package/src/base/radii.css +8 -0
- package/src/base/shadows.css +9 -0
- package/src/base/spacing.css +8 -0
- package/src/base/typography.css +17 -0
- package/src/surfaces/dashboard.css +35 -0
- package/src/surfaces/guest.css +45 -0
- package/src/tailwind-preset.js +14 -41
- package/src/tokens.css +9 -113
package/README.md
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
# @chekinapp/tokens
|
|
2
|
+
|
|
3
|
+
Design tokens for Chekin UI — CSS variables for colors, typography, spacing, and component primitives.
|
|
4
|
+
|
|
5
|
+
## Architecture
|
|
6
|
+
|
|
7
|
+
**One kit, surface-specific tokens**
|
|
8
|
+
|
|
9
|
+
All UI components read from CSS variables. Different surfaces (dashboard, guest, marketing) load different token values, making the same component look appropriate for its context.
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
@chekin/tokens
|
|
13
|
+
base/ ← shared foundation (minimal, grow on demand)
|
|
14
|
+
colors.css essential brand colors
|
|
15
|
+
typography.css font families, weights
|
|
16
|
+
spacing.css spacing scale (add as needed)
|
|
17
|
+
radii.css border radius
|
|
18
|
+
shadows.css focus and outline shadows
|
|
19
|
+
components.css component tokens (Button)
|
|
20
|
+
|
|
21
|
+
surfaces/ ← surface-specific overrides
|
|
22
|
+
dashboard.css Montserrat, radius=6px, compact sizing
|
|
23
|
+
guest.css Poppins, radius=24px, larger touch targets
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
**Philosophy:** Start minimal, add tokens on demand. Don't add tokens until they're actually used by a component.
|
|
27
|
+
|
|
28
|
+
## Usage
|
|
29
|
+
|
|
30
|
+
### In consumer apps
|
|
31
|
+
|
|
32
|
+
Import the surface CSS file that matches your app:
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
// apps/dashboard/src/main.tsx
|
|
36
|
+
import '@chekinapp/tokens/surfaces/dashboard.css';
|
|
37
|
+
import {Button} from '@chekinapp/ui';
|
|
38
|
+
|
|
39
|
+
// Button automatically uses Montserrat, 6px radius, 40px height
|
|
40
|
+
|
|
41
|
+
// apps/guestapp/src/main.tsx
|
|
42
|
+
import '@chekinapp/tokens/surfaces/guest.css';
|
|
43
|
+
import {Button} from '@chekinapp/ui';
|
|
44
|
+
|
|
45
|
+
// Same Button component, now uses Poppins, 24px radius, 56px height
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Legacy import
|
|
49
|
+
|
|
50
|
+
For backward compatibility, `@chekinapp/tokens/tokens.css` imports the dashboard surface by default:
|
|
51
|
+
|
|
52
|
+
```tsx
|
|
53
|
+
import '@chekinapp/tokens/tokens.css'; // equivalent to dashboard.css
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Component tokens
|
|
57
|
+
|
|
58
|
+
Components read from CSS variables defined in `base/components.css` and overridden in surfaces:
|
|
59
|
+
|
|
60
|
+
### Button
|
|
61
|
+
|
|
62
|
+
```css
|
|
63
|
+
/* Base defaults */
|
|
64
|
+
--button-radius: var(--chekin-radius-button); /* 12px */
|
|
65
|
+
--button-height-default: 40px;
|
|
66
|
+
--button-primary-bg: var(--chekin-color-brand-main-blue);
|
|
67
|
+
--button-primary-text: var(--chekin-color-white);
|
|
68
|
+
|
|
69
|
+
/* Dashboard override */
|
|
70
|
+
--button-radius: var(--chekin-radius-input); /* 6px */
|
|
71
|
+
|
|
72
|
+
/* Guest override */
|
|
73
|
+
--button-radius: 24px;
|
|
74
|
+
--button-height-default: 56px;
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## Adding new surfaces
|
|
78
|
+
|
|
79
|
+
1. Create `src/surfaces/marketing.css`
|
|
80
|
+
2. Import base tokens
|
|
81
|
+
3. Override surface-specific values
|
|
82
|
+
4. Export in `package.json`
|
|
83
|
+
5. Document usage
|
|
84
|
+
|
|
85
|
+
## Philosophy
|
|
86
|
+
|
|
87
|
+
- **Components are surface-neutral** — they only read CSS variables
|
|
88
|
+
- **Surfaces are composable** — base + overrides
|
|
89
|
+
- **No runtime overhead** — pure CSS, no JS token resolution
|
|
90
|
+
- **Type-safe Tailwind utilities** — optional preset for each surface
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chekinapp/tokens",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "Chekin design tokens — CSS variables, JSON, and Tailwind preset",
|
|
5
5
|
"private": false,
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -10,7 +10,9 @@
|
|
|
10
10
|
".": "./src/index.js",
|
|
11
11
|
"./tokens.css": "./src/tokens.css",
|
|
12
12
|
"./tokens.json": "./src/tokens.json",
|
|
13
|
-
"./tailwind-preset": "./src/tailwind-preset.js"
|
|
13
|
+
"./tailwind-preset": "./src/tailwind-preset.js",
|
|
14
|
+
"./surfaces/dashboard.css": "./src/surfaces/dashboard.css",
|
|
15
|
+
"./surfaces/guest.css": "./src/surfaces/guest.css"
|
|
14
16
|
},
|
|
15
17
|
"files": [
|
|
16
18
|
"src"
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Base colors — essential brand and UI colors
|
|
3
|
+
* Shared across all surfaces
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
/* ── Brand ─────────────────────────────────────────────────────────── */
|
|
8
|
+
--chekin-color-brand-blue: #385bf8;
|
|
9
|
+
--chekin-color-brand-navy: #161643;
|
|
10
|
+
--chekin-color-brand-red: #ff2467;
|
|
11
|
+
--chekin-color-brand-blue-hover: #5975f5;
|
|
12
|
+
--chekin-color-brand-blue-animation: #294df1;
|
|
13
|
+
--chekin-color-brand-blue-divider: #5f5cf0;
|
|
14
|
+
--chekin-color-brand-blue-dark: #23235d;
|
|
15
|
+
--chekin-color-white: #ffffff;
|
|
16
|
+
--primary: var(--chekin-color-brand-blue);
|
|
17
|
+
|
|
18
|
+
/* ── Grays ─────────────────────────────────────────────────────────── */
|
|
19
|
+
--chekin-color-gray-1: #6b6b95;
|
|
20
|
+
--chekin-color-gray-2: #9696b9;
|
|
21
|
+
--chekin-color-gray-3: #dedeeb;
|
|
22
|
+
--chekin-color-gray-separator: #cecede;
|
|
23
|
+
|
|
24
|
+
/* ── Surfaces ──────────────────────────────────────────────────────── */
|
|
25
|
+
--chekin-color-surface-input-empty: #f4f6f8;
|
|
26
|
+
--chekin-color-surface-autocomplete: #eff6ff;
|
|
27
|
+
--chekin-color-surface-promo: #f4f4fd;
|
|
28
|
+
--chekin-color-surface-pressed: #f0f3ff;
|
|
29
|
+
--chekin-color-surface-card: #efefff;
|
|
30
|
+
--background-main: var(--chekin-color-white);
|
|
31
|
+
|
|
32
|
+
/* ── Text aliases used by existing components ─────────────────────── */
|
|
33
|
+
--chekin-text-dark: var(--chekin-color-brand-navy);
|
|
34
|
+
--chekin-text-gray-dark: var(--chekin-color-gray-1);
|
|
35
|
+
}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Base component tokens — Button primitives
|
|
3
|
+
* Surface-specific overrides live in surfaces/*.css
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
/* ── Button ────────────────────────────────────────────────────────── */
|
|
8
|
+
--button-height-default: 40px;
|
|
9
|
+
--button-height-xs: 24px;
|
|
10
|
+
--button-height-s: 32px;
|
|
11
|
+
--button-height-sm: 36px;
|
|
12
|
+
--button-height-m: 48px;
|
|
13
|
+
--button-height-lg: 44px;
|
|
14
|
+
--button-height-icon: 32px;
|
|
15
|
+
|
|
16
|
+
--button-min-width-default: auto;
|
|
17
|
+
--button-min-width-m: 160px;
|
|
18
|
+
--button-radius: var(--chekin-radius-input);
|
|
19
|
+
--button-font-family: var(--chekin-font-family-primary);
|
|
20
|
+
--button-font-size: 15px;
|
|
21
|
+
--button-font-weight: var(--chekin-font-weight-medium);
|
|
22
|
+
--button-icon-size: 20px;
|
|
23
|
+
--button-shadow: var(--chekin-shadow-subtle-outline);
|
|
24
|
+
--button-focus-shadow: var(--chekin-shadow-focus);
|
|
25
|
+
|
|
26
|
+
/* Primary variant */
|
|
27
|
+
--button-primary-bg: var(--chekin-color-brand-blue);
|
|
28
|
+
--button-primary-text: var(--chekin-color-white);
|
|
29
|
+
--button-primary-hover-overlay: rgba(255, 255, 255, 0.1);
|
|
30
|
+
--button-primary-active-overlay: rgba(0, 0, 0, 0.1);
|
|
31
|
+
|
|
32
|
+
/* Secondary variant */
|
|
33
|
+
--button-secondary-bg: rgba(255, 255, 255, 0.3);
|
|
34
|
+
--button-secondary-text: var(--chekin-color-brand-navy);
|
|
35
|
+
--button-secondary-border: transparent;
|
|
36
|
+
--button-secondary-hover-overlay: rgba(0, 0, 0, 0.05);
|
|
37
|
+
--button-secondary-active-overlay: rgba(0, 0, 0, 0.1);
|
|
38
|
+
|
|
39
|
+
/* Outline variant */
|
|
40
|
+
--button-outline-border: var(--chekin-color-brand-red);
|
|
41
|
+
--button-outline-bg: var(--chekin-color-white);
|
|
42
|
+
--button-outline-text: var(--chekin-color-brand-red);
|
|
43
|
+
--button-outline-hover-bg: #eeeeee;
|
|
44
|
+
|
|
45
|
+
/* Destructive variant */
|
|
46
|
+
--button-destructive-border: var(--chekin-color-brand-red);
|
|
47
|
+
--button-destructive-bg: var(--chekin-color-white);
|
|
48
|
+
--button-destructive-text: var(--chekin-color-brand-red);
|
|
49
|
+
--button-destructive-hover-bg: var(--chekin-color-surface-input-empty);
|
|
50
|
+
|
|
51
|
+
/* Tertiary variant */
|
|
52
|
+
--button-tertiary-border: var(--chekin-color-white);
|
|
53
|
+
--button-tertiary-bg: transparent;
|
|
54
|
+
--button-tertiary-text: var(--chekin-color-white);
|
|
55
|
+
--button-tertiary-hover-overlay: rgba(255, 255, 255, 0.1);
|
|
56
|
+
--button-tertiary-active-overlay: rgba(0, 0, 0, 0.1);
|
|
57
|
+
|
|
58
|
+
/* Ghost variant */
|
|
59
|
+
--button-ghost-bg: transparent;
|
|
60
|
+
--button-ghost-text: var(--chekin-color-brand-navy);
|
|
61
|
+
--button-ghost-hover-bg: var(--chekin-color-surface-input-empty);
|
|
62
|
+
--button-ghost-active-bg: var(--chekin-color-gray-3);
|
|
63
|
+
|
|
64
|
+
/* Link variant */
|
|
65
|
+
--button-link-text: var(--chekin-color-brand-blue);
|
|
66
|
+
--button-link-bg: transparent;
|
|
67
|
+
--button-link-font-weight: var(--chekin-font-weight-semibold);
|
|
68
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Base typography — essential font properties
|
|
3
|
+
* Shared across all surfaces (surface-specific overrides possible)
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
/* ── Font Families ─────────────────────────────────────────────────── */
|
|
8
|
+
--chekin-font-family-primary:
|
|
9
|
+
Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
|
10
|
+
Arial, sans-serif;
|
|
11
|
+
|
|
12
|
+
/* ── Font Weights ──────────────────────────────────────────────────── */
|
|
13
|
+
--chekin-font-weight-regular: 400;
|
|
14
|
+
--chekin-font-weight-medium: 500;
|
|
15
|
+
--chekin-font-weight-semibold: 600;
|
|
16
|
+
--chekin-font-weight-bold: 700;
|
|
17
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Dashboard surface tokens
|
|
3
|
+
* Imports base + applies dashboard-specific overrides
|
|
4
|
+
*
|
|
5
|
+
* Usage: import '@chekinapp/tokens/surfaces/dashboard.css' in dashboard app
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
@import '../base/colors.css';
|
|
9
|
+
@import '../base/typography.css';
|
|
10
|
+
@import '../base/spacing.css';
|
|
11
|
+
@import '../base/radii.css';
|
|
12
|
+
@import '../base/shadows.css';
|
|
13
|
+
@import '../base/breakpoints.css';
|
|
14
|
+
@import '../base/components.css';
|
|
15
|
+
|
|
16
|
+
:root {
|
|
17
|
+
/* Dashboard overrides (currently matches base defaults) */
|
|
18
|
+
--primary: var(--chekin-color-brand-blue);
|
|
19
|
+
--background-main: var(--chekin-color-white);
|
|
20
|
+
|
|
21
|
+
/* Typography: Montserrat (already default) */
|
|
22
|
+
--chekin-font-family-primary:
|
|
23
|
+
ProximaNova, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
|
24
|
+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
25
|
+
|
|
26
|
+
/* Radii: tighter radius for dashboard density */
|
|
27
|
+
--button-radius: var(--chekin-radius-input); /* 6px for dashboard */
|
|
28
|
+
|
|
29
|
+
/* Button sizing: compact for dashboard */
|
|
30
|
+
--button-min-width-default: auto;
|
|
31
|
+
--button-min-width-m: 160px;
|
|
32
|
+
--button-height-default: 40px;
|
|
33
|
+
--button-height-sm: 36px;
|
|
34
|
+
--button-height-m: 48px;
|
|
35
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Guest surface tokens
|
|
3
|
+
* Imports base + applies guest-specific overrides
|
|
4
|
+
*
|
|
5
|
+
* Usage: import '@chekinapp/tokens/surfaces/guest.css' in guest app
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
@import '../base/colors.css';
|
|
9
|
+
@import '../base/typography.css';
|
|
10
|
+
@import '../base/spacing.css';
|
|
11
|
+
@import '../base/radii.css';
|
|
12
|
+
@import '../base/shadows.css';
|
|
13
|
+
@import '../base/breakpoints.css';
|
|
14
|
+
@import '../base/components.css';
|
|
15
|
+
|
|
16
|
+
:root {
|
|
17
|
+
/* Guest overrides */
|
|
18
|
+
--primary: var(--chekin-color-brand-blue);
|
|
19
|
+
--background-main: #f4f6f9;
|
|
20
|
+
|
|
21
|
+
/* Typography: Poppins for guest-facing */
|
|
22
|
+
--chekin-font-family-primary:
|
|
23
|
+
Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
|
24
|
+
Arial, sans-serif;
|
|
25
|
+
|
|
26
|
+
/* Radii: rounder for friendlier guest experience */
|
|
27
|
+
--button-radius: 50px;
|
|
28
|
+
--chekin-radius-input: 10px;
|
|
29
|
+
|
|
30
|
+
/* Button sizing: larger touch targets for guest */
|
|
31
|
+
--button-min-width-default: 295px;
|
|
32
|
+
--button-min-width-m: 275px;
|
|
33
|
+
--button-height-default: 40px;
|
|
34
|
+
--button-height-sm: 46px;
|
|
35
|
+
--button-height-m: 40px;
|
|
36
|
+
|
|
37
|
+
/* Guest-specific button styles */
|
|
38
|
+
--button-primary-bg: var(--chekin-color-brand-blue);
|
|
39
|
+
--button-secondary-bg: var(--chekin-color-surface-input-empty);
|
|
40
|
+
--button-secondary-text: var(--chekin-color-brand-blue);
|
|
41
|
+
--button-outline-border: var(--chekin-color-brand-blue);
|
|
42
|
+
--button-outline-bg: var(--chekin-color-surface-input-empty);
|
|
43
|
+
--button-outline-text: var(--chekin-color-brand-blue);
|
|
44
|
+
--button-link-text: var(--chekin-color-brand-blue);
|
|
45
|
+
}
|
package/src/tailwind-preset.js
CHANGED
|
@@ -13,19 +13,17 @@ export default {
|
|
|
13
13
|
colors: {
|
|
14
14
|
chekin: {
|
|
15
15
|
blue: '#385BF8',
|
|
16
|
-
'blue-hover': '#5975F5',
|
|
17
16
|
'blue-animation': '#294DF1',
|
|
18
17
|
'blue-divider': '#5F5CF0',
|
|
18
|
+
'blue-hover': '#5975F5',
|
|
19
19
|
'blue-dark': '#23235D',
|
|
20
|
-
dark: '#19194B',
|
|
21
20
|
navy: '#161643',
|
|
22
|
-
'gradient-start': '#002CFA',
|
|
23
|
-
'gradient-end': '#274BF0',
|
|
24
21
|
red: '#FF2467',
|
|
25
22
|
'gray-1': '#6B6B95',
|
|
26
23
|
'gray-2': '#9696B9',
|
|
27
24
|
'gray-3': '#DEDEEB',
|
|
28
25
|
'gray-separator': '#CECEDE',
|
|
26
|
+
separator: '#CECEDE',
|
|
29
27
|
'surface-input-empty': '#F4F6F8',
|
|
30
28
|
'surface-autocomplete': '#EFF6FF',
|
|
31
29
|
'surface-promo': '#F4F4FD',
|
|
@@ -44,38 +42,10 @@ export default {
|
|
|
44
42
|
'Arial',
|
|
45
43
|
'sans-serif',
|
|
46
44
|
],
|
|
47
|
-
display: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
|
|
48
|
-
code: ['Poppins', '-apple-system', 'BlinkMacSystemFont', 'monospace'],
|
|
49
|
-
},
|
|
50
|
-
fontSize: {
|
|
51
|
-
'chekin-h1': ['70px', {lineHeight: '1.1', fontWeight: '700'}],
|
|
52
|
-
'chekin-display': ['64px', {lineHeight: '1.1', fontWeight: '700'}],
|
|
53
|
-
'chekin-h2': ['44px', {lineHeight: '1.2', fontWeight: '400'}],
|
|
54
|
-
'chekin-h3': ['36px', {lineHeight: '1.2', fontWeight: '600'}],
|
|
55
|
-
'chekin-h4': ['22px', {lineHeight: '1.3', fontWeight: '600'}],
|
|
56
|
-
'chekin-body-hl': ['20px', {lineHeight: '1.5', fontWeight: '500'}],
|
|
57
|
-
'chekin-body-list': ['18px', {lineHeight: '1.5', fontWeight: '500'}],
|
|
58
|
-
'chekin-body': ['16px', {lineHeight: '1.5', fontWeight: '500'}],
|
|
59
|
-
'chekin-small': ['14px', {lineHeight: '1.4', fontWeight: '500'}],
|
|
60
|
-
'chekin-caption': ['12px', {lineHeight: '1.3', fontWeight: '400'}],
|
|
61
|
-
},
|
|
62
|
-
spacing: {
|
|
63
|
-
'chekin-0-5': '4px',
|
|
64
|
-
'chekin-1': '8px',
|
|
65
|
-
'chekin-1-25': '10px',
|
|
66
|
-
'chekin-1-375': '11px',
|
|
67
|
-
'chekin-2': '16px',
|
|
68
|
-
'chekin-3': '24px',
|
|
69
|
-
'chekin-4': '32px',
|
|
70
|
-
'chekin-5': '40px',
|
|
71
|
-
'chekin-6': '48px',
|
|
72
45
|
},
|
|
73
46
|
borderRadius: {
|
|
74
|
-
'chekin-micro': '2px',
|
|
75
|
-
'chekin-small': '4px',
|
|
76
47
|
'chekin-input': '6px',
|
|
77
48
|
'chekin-standard': '8px',
|
|
78
|
-
'chekin-button': '12px',
|
|
79
49
|
'chekin-card': '14px',
|
|
80
50
|
'chekin-circle': '25px',
|
|
81
51
|
'chekin-pill': '51px',
|
|
@@ -83,19 +53,22 @@ export default {
|
|
|
83
53
|
boxShadow: {
|
|
84
54
|
'chekin-focus': '0px 0px 0px 3px rgba(56, 91, 248, 0.2)',
|
|
85
55
|
'chekin-subtle-outline': '0px 0px 0px 1px rgba(56, 91, 248, 0.2)',
|
|
86
|
-
'chekin-solid-focus': '0px 0px 0px 1px #385BF8',
|
|
87
56
|
'chekin-card': '0px 0px 5px rgba(26, 148, 255, 0.173)',
|
|
88
57
|
'chekin-card-hover': '0px 20px 25px rgba(26, 148, 255, 0.173)',
|
|
89
58
|
'chekin-dropdown': '0px 5px 15px rgba(26, 148, 255, 0.16)',
|
|
90
|
-
'chekin-elevation': '0px 31px 50px rgba(26, 140, 255, 0.1)',
|
|
91
|
-
'chekin-xs-button': '0px 1px 4px rgba(0, 0, 0, 0.2)',
|
|
92
59
|
},
|
|
93
|
-
|
|
94
|
-
'chekin-
|
|
95
|
-
'chekin-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
'chekin-
|
|
60
|
+
fontSize: {
|
|
61
|
+
'chekin-small': ['14px', {lineHeight: '20px'}],
|
|
62
|
+
'chekin-caption': ['12px', {lineHeight: '16px'}],
|
|
63
|
+
},
|
|
64
|
+
spacing: {
|
|
65
|
+
'chekin-1': '8px',
|
|
66
|
+
'chekin-1-25': '10px',
|
|
67
|
+
'chekin-2': '16px',
|
|
68
|
+
'chekin-3': '24px',
|
|
69
|
+
'chekin-4': '32px',
|
|
70
|
+
'chekin-5': '40px',
|
|
71
|
+
'chekin-6': '48px',
|
|
99
72
|
},
|
|
100
73
|
keyframes: {
|
|
101
74
|
'accordion-down': {
|
package/src/tokens.css
CHANGED
|
@@ -1,121 +1,17 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @chekinapp/tokens — CSS custom properties
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
4
|
+
* Legacy import for backward compatibility.
|
|
5
|
+
* New projects should import surface-specific tokens:
|
|
6
|
+
* - @chekinapp/tokens/surfaces/dashboard.css
|
|
7
|
+
* - @chekinapp/tokens/surfaces/guest.css
|
|
6
8
|
*
|
|
7
|
-
*
|
|
9
|
+
* This file imports base tokens + dashboard surface (default).
|
|
8
10
|
*/
|
|
9
11
|
|
|
10
|
-
|
|
11
|
-
/* ── UI Kit Variables ───────────────────────────────────────────────── */
|
|
12
|
-
--background: 0 0% 100%;
|
|
13
|
-
--foreground: 240 50.6% 17.5%; /* #161643 */
|
|
14
|
-
--muted: 0 0% 96.1%;
|
|
15
|
-
--muted-foreground: 240 17% 50%;
|
|
16
|
-
--border: 0 0% 89.8%; /* #E5E6EE */
|
|
17
|
-
--neutral20-shadow: 0 0 10px 0 rgba(143, 143, 143, 0.2);
|
|
18
|
-
|
|
19
|
-
/* ── Brand ─────────────────────────────────────────────────────────── */
|
|
20
|
-
--chekin-color-brand-main-blue: #385bf8;
|
|
21
|
-
--chekin-color-brand-dark: #19194b;
|
|
22
|
-
--chekin-color-brand-navy: #161643;
|
|
23
|
-
--chekin-color-brand-gradient-start: #002cfa;
|
|
24
|
-
--chekin-color-brand-gradient-end: #274bf0;
|
|
25
|
-
--chekin-color-brand-red: #ff2467;
|
|
26
|
-
|
|
27
|
-
/* ── Blue accents ──────────────────────────────────────────────────── */
|
|
28
|
-
--chekin-color-blue-animation: #294df1;
|
|
29
|
-
--chekin-color-blue-divider: #5f5cf0;
|
|
30
|
-
--chekin-color-blue-hover: #5975f5;
|
|
31
|
-
--chekin-color-blue-dark: #23235d;
|
|
32
|
-
|
|
33
|
-
/* ── Grays ─────────────────────────────────────────────────────────── */
|
|
34
|
-
--chekin-color-gray-1: #6b6b95; /* secondary text, body */
|
|
35
|
-
--chekin-color-gray-2: #9696b9; /* tertiary text, captions */
|
|
36
|
-
--chekin-color-gray-3: #dedeeb; /* borders, dividers */
|
|
37
|
-
--chekin-color-gray-separator: #cecede;
|
|
38
|
-
--chekin-color-white: #ffffff;
|
|
39
|
-
|
|
40
|
-
/* ── Surfaces ──────────────────────────────────────────────────────── */
|
|
41
|
-
--chekin-color-surface-input-empty: #f4f6f8;
|
|
42
|
-
--chekin-color-surface-autocomplete: #eff6ff;
|
|
43
|
-
--chekin-color-surface-promo-lavender: #f4f4fd;
|
|
44
|
-
--chekin-color-surface-pressed-blue: #f0f3ff;
|
|
45
|
-
--chekin-color-surface-card: #efefff;
|
|
46
|
-
|
|
47
|
-
/* ── Semantic text ─────────────────────────────────────────────────── */
|
|
48
|
-
--chekin-text-dark: var(--chekin-color-brand-navy);
|
|
49
|
-
--chekin-text-white: var(--chekin-color-white);
|
|
50
|
-
--chekin-text-brand: var(--chekin-color-brand-main-blue);
|
|
51
|
-
--chekin-text-danger: var(--chekin-color-brand-red);
|
|
52
|
-
--chekin-text-gray-dark: var(--chekin-color-gray-1);
|
|
53
|
-
--chekin-text-gray-medium: var(--chekin-color-gray-2);
|
|
54
|
-
|
|
55
|
-
/* ── Typography ────────────────────────────────────────────────────── */
|
|
56
|
-
--chekin-font-family-primary:
|
|
57
|
-
Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
|
58
|
-
Arial, sans-serif;
|
|
59
|
-
--chekin-font-family-display: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
60
|
-
--chekin-font-family-code: Poppins, -apple-system, BlinkMacSystemFont, monospace;
|
|
12
|
+
@import './surfaces/dashboard.css';
|
|
61
13
|
|
|
62
|
-
|
|
63
|
-
--
|
|
64
|
-
--
|
|
65
|
-
--chekin-font-weight-bold: 700;
|
|
66
|
-
--chekin-font-weight-extrabold: 800;
|
|
67
|
-
|
|
68
|
-
--chekin-font-size-h1: 70px;
|
|
69
|
-
--chekin-font-size-section-display: 64px;
|
|
70
|
-
--chekin-font-size-h2: 44px;
|
|
71
|
-
--chekin-font-size-h3: 36px;
|
|
72
|
-
--chekin-font-size-registration-h1: 31px;
|
|
73
|
-
--chekin-font-size-h4: 22px;
|
|
74
|
-
--chekin-font-size-body-highlight: 20px;
|
|
75
|
-
--chekin-font-size-body-list: 18px;
|
|
76
|
-
--chekin-font-size-registration-h2: 18px;
|
|
77
|
-
--chekin-font-size-body: 16px;
|
|
78
|
-
--chekin-font-size-footer-link: 15px;
|
|
79
|
-
--chekin-font-size-small: 14px;
|
|
80
|
-
--chekin-font-size-caption: 12px;
|
|
81
|
-
|
|
82
|
-
/* ── Spacing (8px base) ────────────────────────────────────────────── */
|
|
83
|
-
--chekin-space-0-5: 4px;
|
|
84
|
-
--chekin-space-1: 8px;
|
|
85
|
-
--chekin-space-1-25: 10px;
|
|
86
|
-
--chekin-space-1-375: 11px;
|
|
87
|
-
--chekin-space-2: 16px;
|
|
88
|
-
--chekin-space-3: 24px;
|
|
89
|
-
--chekin-space-4: 32px;
|
|
90
|
-
--chekin-space-5: 40px;
|
|
91
|
-
--chekin-space-6: 48px;
|
|
92
|
-
|
|
93
|
-
/* ── Radii ─────────────────────────────────────────────────────────── */
|
|
94
|
-
--chekin-radius-micro: 2px;
|
|
95
|
-
--chekin-radius-small: 4px;
|
|
96
|
-
--chekin-radius-input: 6px;
|
|
97
|
-
--chekin-radius-standard: 8px;
|
|
98
|
-
--chekin-radius-button: 12px;
|
|
99
|
-
--chekin-radius-card: 14px;
|
|
100
|
-
--chekin-radius-circle: 25px;
|
|
101
|
-
--chekin-radius-pill: 51px;
|
|
102
|
-
--chekin-radius-full: 200px;
|
|
103
|
-
|
|
104
|
-
/* ── Shadows ───────────────────────────────────────────────────────── */
|
|
105
|
-
--chekin-shadow-focus-ring: 0px 0px 0px 3px rgba(56, 91, 248, 0.2);
|
|
106
|
-
--chekin-shadow-subtle-outline: 0px 0px 0px 1px rgba(56, 91, 248, 0.2);
|
|
107
|
-
--chekin-shadow-solid-focus: 0px 0px 0px 1px #385bf8;
|
|
108
|
-
--chekin-shadow-card-default: 0px 0px 5px rgba(26, 148, 255, 0.173);
|
|
109
|
-
--chekin-shadow-card-hover: 0px 20px 25px rgba(26, 148, 255, 0.173);
|
|
110
|
-
--chekin-shadow-dropdown: 0px 5px 15px rgba(26, 148, 255, 0.16);
|
|
111
|
-
--chekin-shadow-large-elevation: 0px 31px 50px rgba(26, 140, 255, 0.1);
|
|
112
|
-
--chekin-shadow-xs-button: 0px 1px 4px rgba(0, 0, 0, 0.2);
|
|
113
|
-
--chekin-shadow-promo-pill: 0px 2px 7.5px rgba(0, 0, 0, 0.1);
|
|
114
|
-
|
|
115
|
-
/* ── Breakpoints (for reference; typically used in config) ─────────── */
|
|
116
|
-
--chekin-breakpoint-mobile-small: 375px;
|
|
117
|
-
--chekin-breakpoint-mobile: 768px;
|
|
118
|
-
--chekin-breakpoint-tablet: 1024px;
|
|
119
|
-
--chekin-breakpoint-desktop-small: 1280px;
|
|
120
|
-
--chekin-breakpoint-desktop: 1440px;
|
|
14
|
+
:root {
|
|
15
|
+
--status-danger: #ff0000;
|
|
16
|
+
--max-field-width: 425px;
|
|
121
17
|
}
|