@chekinapp/tokens 0.0.1
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/package.json +25 -0
- package/src/index.js +8 -0
- package/src/tailwind-preset.js +116 -0
- package/src/tokens.css +121 -0
- package/src/tokens.json +156 -0
package/package.json
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@chekinapp/tokens",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "Chekin design tokens — CSS variables, JSON, and Tailwind preset",
|
|
5
|
+
"private": false,
|
|
6
|
+
"license": "UNLICENSED",
|
|
7
|
+
"type": "module",
|
|
8
|
+
"main": "./src/index.js",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": "./src/index.js",
|
|
11
|
+
"./tokens.css": "./src/tokens.css",
|
|
12
|
+
"./tokens.json": "./src/tokens.json",
|
|
13
|
+
"./tailwind-preset": "./src/tailwind-preset.js"
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"src"
|
|
17
|
+
],
|
|
18
|
+
"publishConfig": {
|
|
19
|
+
"access": "public"
|
|
20
|
+
},
|
|
21
|
+
"scripts": {
|
|
22
|
+
"build": "echo 'tokens are source files, nothing to build'",
|
|
23
|
+
"typecheck": "echo 'no ts in tokens'"
|
|
24
|
+
}
|
|
25
|
+
}
|
package/src/index.js
ADDED
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @chekinapp/tokens/tailwind-preset
|
|
3
|
+
*
|
|
4
|
+
* Drop-in Tailwind preset that exposes Chekin tokens as Tailwind theme keys.
|
|
5
|
+
* Use it by adding `presets: [require('@chekinapp/tokens/tailwind-preset')]` to a
|
|
6
|
+
* consumer's tailwind.config.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
/** @type {import('tailwindcss').Config} */
|
|
10
|
+
export default {
|
|
11
|
+
theme: {
|
|
12
|
+
extend: {
|
|
13
|
+
colors: {
|
|
14
|
+
chekin: {
|
|
15
|
+
blue: '#385BF8',
|
|
16
|
+
'blue-hover': '#5975F5',
|
|
17
|
+
'blue-animation': '#294DF1',
|
|
18
|
+
'blue-divider': '#5F5CF0',
|
|
19
|
+
'blue-dark': '#23235D',
|
|
20
|
+
dark: '#19194B',
|
|
21
|
+
navy: '#161643',
|
|
22
|
+
'gradient-start': '#002CFA',
|
|
23
|
+
'gradient-end': '#274BF0',
|
|
24
|
+
red: '#FF2467',
|
|
25
|
+
'gray-1': '#6B6B95',
|
|
26
|
+
'gray-2': '#9696B9',
|
|
27
|
+
'gray-3': '#DEDEEB',
|
|
28
|
+
'gray-separator': '#CECEDE',
|
|
29
|
+
'surface-input-empty': '#F4F6F8',
|
|
30
|
+
'surface-autocomplete': '#EFF6FF',
|
|
31
|
+
'surface-promo': '#F4F4FD',
|
|
32
|
+
'surface-pressed': '#F0F3FF',
|
|
33
|
+
'surface-card': '#EFEFFF',
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
fontFamily: {
|
|
37
|
+
sans: [
|
|
38
|
+
'Montserrat',
|
|
39
|
+
'-apple-system',
|
|
40
|
+
'BlinkMacSystemFont',
|
|
41
|
+
'Segoe UI',
|
|
42
|
+
'Roboto',
|
|
43
|
+
'Helvetica Neue',
|
|
44
|
+
'Arial',
|
|
45
|
+
'sans-serif',
|
|
46
|
+
],
|
|
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
|
+
},
|
|
73
|
+
borderRadius: {
|
|
74
|
+
'chekin-micro': '2px',
|
|
75
|
+
'chekin-small': '4px',
|
|
76
|
+
'chekin-input': '6px',
|
|
77
|
+
'chekin-standard': '8px',
|
|
78
|
+
'chekin-button': '12px',
|
|
79
|
+
'chekin-card': '14px',
|
|
80
|
+
'chekin-circle': '25px',
|
|
81
|
+
'chekin-pill': '51px',
|
|
82
|
+
},
|
|
83
|
+
boxShadow: {
|
|
84
|
+
'chekin-focus': '0px 0px 0px 3px rgba(56, 91, 248, 0.2)',
|
|
85
|
+
'chekin-subtle-outline': '0px 0px 0px 1px rgba(56, 91, 248, 0.2)',
|
|
86
|
+
'chekin-solid-focus': '0px 0px 0px 1px #385BF8',
|
|
87
|
+
'chekin-card': '0px 0px 5px rgba(26, 148, 255, 0.173)',
|
|
88
|
+
'chekin-card-hover': '0px 20px 25px rgba(26, 148, 255, 0.173)',
|
|
89
|
+
'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
|
+
},
|
|
93
|
+
screens: {
|
|
94
|
+
'chekin-sm': '375px',
|
|
95
|
+
'chekin-md': '768px',
|
|
96
|
+
'chekin-lg': '1024px',
|
|
97
|
+
'chekin-xl': '1280px',
|
|
98
|
+
'chekin-2xl': '1440px',
|
|
99
|
+
},
|
|
100
|
+
keyframes: {
|
|
101
|
+
'accordion-down': {
|
|
102
|
+
from: {height: '0'},
|
|
103
|
+
to: {height: 'var(--radix-accordion-content-height)'},
|
|
104
|
+
},
|
|
105
|
+
'accordion-up': {
|
|
106
|
+
from: {height: 'var(--radix-accordion-content-height)'},
|
|
107
|
+
to: {height: '0'},
|
|
108
|
+
},
|
|
109
|
+
},
|
|
110
|
+
animation: {
|
|
111
|
+
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
112
|
+
'accordion-up': 'accordion-up 0.2s ease-out',
|
|
113
|
+
},
|
|
114
|
+
},
|
|
115
|
+
},
|
|
116
|
+
};
|
package/src/tokens.css
ADDED
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @chekinapp/tokens — CSS custom properties
|
|
3
|
+
*
|
|
4
|
+
* Source of truth for all visual primitives. Consumed by @chekinapp/ui, marketing
|
|
5
|
+
* sites, emails, and any other platform that can read CSS variables.
|
|
6
|
+
*
|
|
7
|
+
* Naming: --chekin-<category>-<name>.
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
:root {
|
|
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;
|
|
61
|
+
|
|
62
|
+
--chekin-font-weight-regular: 400;
|
|
63
|
+
--chekin-font-weight-medium: 500;
|
|
64
|
+
--chekin-font-weight-semibold: 600;
|
|
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;
|
|
121
|
+
}
|
package/src/tokens.json
ADDED
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://schemas.tokens.studio/v1/tokens.json",
|
|
3
|
+
"color": {
|
|
4
|
+
"brand": {
|
|
5
|
+
"main-blue": {"value": "#385BF8", "type": "color"},
|
|
6
|
+
"dark": {"value": "#19194B", "type": "color"},
|
|
7
|
+
"navy-blue": {"value": "#161643", "type": "color"},
|
|
8
|
+
"gradient-start": {"value": "#002CFA", "type": "color"},
|
|
9
|
+
"gradient-end": {"value": "#274BF0", "type": "color"},
|
|
10
|
+
"red": {"value": "#FF2467", "type": "color"}
|
|
11
|
+
},
|
|
12
|
+
"blue-accent": {
|
|
13
|
+
"animation": {"value": "#294DF1", "type": "color"},
|
|
14
|
+
"divider": {"value": "#5F5CF0", "type": "color"},
|
|
15
|
+
"hover": {"value": "#5975F5", "type": "color"},
|
|
16
|
+
"dark-blue": {"value": "#23235D", "type": "color"}
|
|
17
|
+
},
|
|
18
|
+
"gray": {
|
|
19
|
+
"1": {
|
|
20
|
+
"value": "#6B6B95",
|
|
21
|
+
"type": "color",
|
|
22
|
+
"description": "Secondary text, body"
|
|
23
|
+
},
|
|
24
|
+
"2": {
|
|
25
|
+
"value": "#9696B9",
|
|
26
|
+
"type": "color",
|
|
27
|
+
"description": "Tertiary text, captions"
|
|
28
|
+
},
|
|
29
|
+
"3": {
|
|
30
|
+
"value": "#DEDEEB",
|
|
31
|
+
"type": "color",
|
|
32
|
+
"description": "Borders, dividers"
|
|
33
|
+
},
|
|
34
|
+
"separator": {"value": "#CECEDE", "type": "color"},
|
|
35
|
+
"white": {"value": "#FFFFFF", "type": "color"}
|
|
36
|
+
},
|
|
37
|
+
"surface": {
|
|
38
|
+
"input-empty": {"value": "#F4F6F8", "type": "color"},
|
|
39
|
+
"autocomplete": {"value": "#EFF6FF", "type": "color"},
|
|
40
|
+
"promo-lavender": {"value": "#F4F4FD", "type": "color"},
|
|
41
|
+
"pressed-blue": {"value": "#F0F3FF", "type": "color"},
|
|
42
|
+
"card": {"value": "#EFEFFF", "type": "color"}
|
|
43
|
+
},
|
|
44
|
+
"text": {
|
|
45
|
+
"dark": {"value": "{color.brand.navy-blue}", "type": "color"},
|
|
46
|
+
"white": {"value": "{color.gray.white}", "type": "color"},
|
|
47
|
+
"brand": {"value": "{color.brand.main-blue}", "type": "color"},
|
|
48
|
+
"danger": {"value": "{color.brand.red}", "type": "color"},
|
|
49
|
+
"gray-dark": {"value": "{color.gray.1}", "type": "color"},
|
|
50
|
+
"gray-medium": {"value": "{color.gray.2}", "type": "color"}
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
"font": {
|
|
54
|
+
"family": {
|
|
55
|
+
"primary": {
|
|
56
|
+
"value": "Proxima Nova, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
|
|
57
|
+
"type": "fontFamilies"
|
|
58
|
+
},
|
|
59
|
+
"display": {
|
|
60
|
+
"value": "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
|
61
|
+
"type": "fontFamilies"
|
|
62
|
+
},
|
|
63
|
+
"code": {
|
|
64
|
+
"value": "Poppins, -apple-system, BlinkMacSystemFont, monospace",
|
|
65
|
+
"type": "fontFamilies"
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
"weight": {
|
|
69
|
+
"regular": {"value": 400, "type": "fontWeights"},
|
|
70
|
+
"medium": {"value": 500, "type": "fontWeights"},
|
|
71
|
+
"semibold": {"value": 600, "type": "fontWeights"},
|
|
72
|
+
"bold": {"value": 700, "type": "fontWeights"},
|
|
73
|
+
"extrabold": {"value": 800, "type": "fontWeights"}
|
|
74
|
+
},
|
|
75
|
+
"size": {
|
|
76
|
+
"h1": {"value": "70px", "type": "fontSizes"},
|
|
77
|
+
"section-display": {"value": "64px", "type": "fontSizes"},
|
|
78
|
+
"h2": {"value": "44px", "type": "fontSizes"},
|
|
79
|
+
"h3": {"value": "36px", "type": "fontSizes"},
|
|
80
|
+
"registration-h1": {"value": "31px", "type": "fontSizes"},
|
|
81
|
+
"text-anim-mobile": {"value": "30px", "type": "fontSizes"},
|
|
82
|
+
"h4": {"value": "22px", "type": "fontSizes"},
|
|
83
|
+
"body-highlight": {"value": "20px", "type": "fontSizes"},
|
|
84
|
+
"body-list": {"value": "18px", "type": "fontSizes"},
|
|
85
|
+
"registration-h2": {"value": "18px", "type": "fontSizes"},
|
|
86
|
+
"body": {"value": "16px", "type": "fontSizes"},
|
|
87
|
+
"footer-link": {"value": "15px", "type": "fontSizes"},
|
|
88
|
+
"small": {"value": "14px", "type": "fontSizes"},
|
|
89
|
+
"caption": {"value": "12px", "type": "fontSizes"}
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
"space": {
|
|
93
|
+
"0-5": {"value": "4px", "type": "spacing"},
|
|
94
|
+
"1": {"value": "8px", "type": "spacing"},
|
|
95
|
+
"1-25": {"value": "10px", "type": "spacing"},
|
|
96
|
+
"1-375": {"value": "11px", "type": "spacing"},
|
|
97
|
+
"2": {"value": "16px", "type": "spacing"},
|
|
98
|
+
"3": {"value": "24px", "type": "spacing"},
|
|
99
|
+
"4": {"value": "32px", "type": "spacing"},
|
|
100
|
+
"5": {"value": "40px", "type": "spacing"},
|
|
101
|
+
"6": {"value": "48px", "type": "spacing"}
|
|
102
|
+
},
|
|
103
|
+
"radius": {
|
|
104
|
+
"micro": {"value": "2px", "type": "borderRadius"},
|
|
105
|
+
"small": {"value": "4px", "type": "borderRadius"},
|
|
106
|
+
"input": {"value": "6px", "type": "borderRadius"},
|
|
107
|
+
"standard": {"value": "8px", "type": "borderRadius"},
|
|
108
|
+
"button": {"value": "12px", "type": "borderRadius"},
|
|
109
|
+
"card": {"value": "14px", "type": "borderRadius"},
|
|
110
|
+
"circle": {"value": "25px", "type": "borderRadius"},
|
|
111
|
+
"pill": {"value": "51px", "type": "borderRadius"},
|
|
112
|
+
"full": {"value": "200px", "type": "borderRadius"}
|
|
113
|
+
},
|
|
114
|
+
"shadow": {
|
|
115
|
+
"focus-ring": {
|
|
116
|
+
"value": "0px 0px 0px 3px rgba(56,91,248,0.2)",
|
|
117
|
+
"type": "boxShadow"
|
|
118
|
+
},
|
|
119
|
+
"subtle-outline": {
|
|
120
|
+
"value": "0px 0px 0px 1px rgba(56,91,248,0.2)",
|
|
121
|
+
"type": "boxShadow"
|
|
122
|
+
},
|
|
123
|
+
"solid-focus": {"value": "0px 0px 0px 1px #385BF8", "type": "boxShadow"},
|
|
124
|
+
"card-default": {
|
|
125
|
+
"value": "0px 0px 5px rgba(26,148,255,0.173)",
|
|
126
|
+
"type": "boxShadow"
|
|
127
|
+
},
|
|
128
|
+
"card-hover": {
|
|
129
|
+
"value": "0px 20px 25px rgba(26,148,255,0.173)",
|
|
130
|
+
"type": "boxShadow"
|
|
131
|
+
},
|
|
132
|
+
"dropdown": {
|
|
133
|
+
"value": "0px 5px 15px rgba(26,148,255,0.16)",
|
|
134
|
+
"type": "boxShadow"
|
|
135
|
+
},
|
|
136
|
+
"large-elevation": {
|
|
137
|
+
"value": "0px 31px 50px rgba(26,140,255,0.1)",
|
|
138
|
+
"type": "boxShadow"
|
|
139
|
+
},
|
|
140
|
+
"xs-button": {
|
|
141
|
+
"value": "0px 1px 4px rgba(0,0,0,0.2)",
|
|
142
|
+
"type": "boxShadow"
|
|
143
|
+
},
|
|
144
|
+
"promo-pill": {
|
|
145
|
+
"value": "0px 2px 7.5px rgba(0,0,0,0.1)",
|
|
146
|
+
"type": "boxShadow"
|
|
147
|
+
}
|
|
148
|
+
},
|
|
149
|
+
"breakpoint": {
|
|
150
|
+
"mobile-small": {"value": "375px", "type": "sizing"},
|
|
151
|
+
"mobile": {"value": "768px", "type": "sizing"},
|
|
152
|
+
"tablet": {"value": "1024px", "type": "sizing"},
|
|
153
|
+
"desktop-small": {"value": "1280px", "type": "sizing"},
|
|
154
|
+
"desktop": {"value": "1440px", "type": "sizing"}
|
|
155
|
+
}
|
|
156
|
+
}
|