@transferwise/neptune-tokens 0.0.0-experimental-b6daf3f

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.
Files changed (25) hide show
  1. package/README.md +148 -0
  2. package/colors-base.css +46 -0
  3. package/colors-base.less +43 -0
  4. package/colors.json +11912 -0
  5. package/package.json +54 -0
  6. package/themes/dark/tokens.css +141 -0
  7. package/themes/dark/tokens.less +138 -0
  8. package/themes/light/tokens.css +141 -0
  9. package/themes/light/tokens.less +138 -0
  10. package/themes/navy/tokens.css +141 -0
  11. package/themes/navy/tokens.less +138 -0
  12. package/themes/personal/tokens.css +215 -0
  13. package/themes/personal/tokens.less +150 -0
  14. package/themes/personal--bright-green/tokens.css +243 -0
  15. package/themes/personal--bright-green/tokens.less +178 -0
  16. package/themes/personal--dark/tokens.css +243 -0
  17. package/themes/personal--dark/tokens.less +178 -0
  18. package/themes/personal--forest-green/tokens.css +243 -0
  19. package/themes/personal--forest-green/tokens.less +178 -0
  20. package/themes/platform/tokens.css +181 -0
  21. package/themes/platform/tokens.less +178 -0
  22. package/themes/platform--forest-green/tokens.css +181 -0
  23. package/themes/platform--forest-green/tokens.less +178 -0
  24. package/tokens.css +141 -0
  25. package/tokens.less +220 -0
package/package.json ADDED
@@ -0,0 +1,54 @@
1
+ {
2
+ "name": "@transferwise/neptune-tokens",
3
+ "version": "0.0.0-experimental-b6daf3f",
4
+ "description": "Design tokens for the Neptune Design System",
5
+ "license": "UNLICENSED",
6
+ "type": "module",
7
+ "repository": {
8
+ "fullname": "transferwise/neptune-tokens",
9
+ "type": "git",
10
+ "url": "git+https://github.com/transferwise/neptune-tokens.git"
11
+ },
12
+ "files": [
13
+ "*.css",
14
+ "*.json",
15
+ "*.less",
16
+ "themes/**/*"
17
+ ],
18
+ "scripts": {
19
+ "test": "release-to-github-with-changelog-pre-release-checks",
20
+ "build": "node build && yarn inject-viewport-theme",
21
+ "inject-viewport-theme": "chmod +x ./build/inject-viewport-theme.sh && ./build/inject-viewport-theme.sh",
22
+ "prepublishOnly": "yarn build && cp -R dist/* .",
23
+ "postpublish": "git clean -fd",
24
+ "changeset": "changeset",
25
+ "release": "changeset publish"
26
+ },
27
+ "devDependencies": {
28
+ "@semantic-release/changelog": "^6.0.1",
29
+ "@semantic-release/git": "^10.0.1",
30
+ "@semantic-release/npm": "^9.0.1",
31
+ "chroma-js": "^2.1.2",
32
+ "cz-conventional-changelog": "3.3.0",
33
+ "less": "^3.12.2",
34
+ "prettier": "^2.3.2",
35
+ "release-to-github-with-changelog": "^1.2.4",
36
+ "semantic-release": "^19.0.3",
37
+ "style-dictionary": "^3.0.1",
38
+ "@changesets/cli": "^2.27.1",
39
+ "@changesets/changelog-github": "^0.5.0"
40
+ },
41
+ "config": {
42
+ "commitizen": {
43
+ "path": "./node_modules/cz-conventional-changelog"
44
+ }
45
+ },
46
+ "publishConfig": {
47
+ "access": "public"
48
+ },
49
+ "resolutions": {
50
+ "json-schema": "^0.4.0",
51
+ "http-cache-semantics": "^4.1.1",
52
+ "minimist": "^1.2.6"
53
+ }
54
+ }
package/themes/dark/tokens.css ADDED
@@ -0,0 +1,141 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Fri, 10 May 2024 10:39:19 GMT
4
+ */
5
+
6
+ .np-theme-dark {
7
+ --color-content-primary: #e2e6e8;
8
+ --color-content-secondary: #c9cbce;
9
+ --color-content-tertiary: #a8aaac;
10
+ --color-content-accent: #00b9ff;
11
+ --color-content-accent-hover: #00a6ea;
12
+ --color-content-accent-active: #0097db;
13
+ --color-content-positive: #6fd698;
14
+ --color-content-positive-hover: #5ac285;
15
+ --color-content-positive-active: #4bb377;
16
+ --color-content-negative: #ffa6a9;
17
+ --color-content-negative-hover: #ea9396;
18
+ --color-content-negative-active: #da8488;
19
+ --color-content-warning: #ffd184;
20
+ --color-content-warning-hover: #e9bd71;
21
+ --color-content-warning-active: #daae63;
22
+ --color-interactive-accent: #00a2dd;
23
+ --color-interactive-accent-hover: #008fc9;
24
+ --color-interactive-accent-active: #0081ba;
25
+ --color-interactive-positive: #2ead4b;
26
+ --color-interactive-positive-hover: #069939;
27
+ --color-interactive-positive-active: #008b2b;
28
+ --color-interactive-negative: #e74848;
29
+ --color-interactive-negative-hover: #d03238;
30
+ --color-interactive-negative-active: #bf1e2c;
31
+ --color-interactive-warning: #df8700;
32
+ --color-interactive-warning-hover: #c97500;
33
+ --color-interactive-warning-active: #b86700;
34
+ --color-interactive-secondary: #a8aaac;
35
+ --color-interactive-secondary-hover: #959799;
36
+ --color-interactive-secondary-active: #87898b;
37
+ --color-background-screen: #181818;
38
+ --color-background-elevated: #202020;
39
+ --color-background-neutral: #86a7bd1a;
40
+ --color-background-accent: #38c8ff1a;
41
+ --color-background-positive: #36c7971a;
42
+ --color-background-negative: #ff87871a;
43
+ --color-background-warning: #ffac001a;
44
+ --color-background-overlay: #ffffff1a;
45
+ --color-border-neutral: #ffffff1a;
46
+ --color-border-overlay: #ffffff1a;
47
+ --color-core-contrast: #ffffff;
48
+ --padding-x-small: 8px;
49
+ --padding-small: 16px;
50
+ --padding-medium: 24px;
51
+ --padding-large: 32px;
52
+ --radius-full: 9999px;
53
+ --radius-small: 10px;
54
+ --radius-medium: 16px;
55
+ --radius-large: 24px;
56
+ --size-4: 4px;
57
+ --size-8: 8px;
58
+ --size-10: 10px;
59
+ --size-12: 12px;
60
+ --size-14: 14px;
61
+ --size-16: 16px;
62
+ --size-24: 24px;
63
+ --size-32: 32px;
64
+ --size-40: 40px;
65
+ --size-48: 48px;
66
+ --size-52: 52px;
67
+ --size-56: 56px;
68
+ --size-60: 60px;
69
+ --size-64: 64px;
70
+ --size-72: 72px;
71
+ --size-80: 80px;
72
+ --size-88: 88px;
73
+ --size-96: 96px;
74
+ --size-104: 104px;
75
+ --size-112: 112px;
76
+ --size-120: 120px;
77
+ --size-126: 126px;
78
+ --size-128: 128px;
79
+ --size-146: 146px;
80
+ --size-154: 154px;
81
+ --size-160: 160px;
82
+ --size-x-small: 24px;
83
+ --size-small: 32px;
84
+ --size-medium: 40px;
85
+ --size-large: 48px;
86
+ --size-x-large: 56px;
87
+ --size-2x-large: 72px;
88
+ --space-content-horizontal: 16px;
89
+ --space-small: 16px;
90
+ --space-medium: 32px;
91
+ --space-large: 40px;
92
+ --space-x-large: 56px;
93
+ --font-size-12: 0.75rem;
94
+ --font-size-14: 0.875rem;
95
+ --font-size-16: 1rem;
96
+ --font-size-18: 1.125rem;
97
+ --font-size-20: 1.25rem;
98
+ --font-size-22: 1.375rem;
99
+ --font-size-24: 1.5rem;
100
+ --font-size-26: 1.625rem;
101
+ --font-size-28: 1.75rem;
102
+ --font-size-30: 1.875rem;
103
+ --font-size-32: 2rem;
104
+ --letter-spacing-xxs: 0.005em;
105
+ --letter-spacing-xs: 0.01em;
106
+ --letter-spacing-sm: 0.0125em;
107
+ --letter-spacing-md: 0.015em;
108
+ --letter-spacing-lg: 0.02em;
109
+ --letter-spacing-xl: 0.025em;
110
+ --letter-spacing-negative-xxs: -0.005em;
111
+ --letter-spacing-negative-xs: -0.01em;
112
+ --letter-spacing-negative-sm: -0.0125em;
113
+ --letter-spacing-negative-md: -0.015em;
114
+ --letter-spacing-negative-lg: -0.02em;
115
+ --letter-spacing-negative-xl: -0.025em;
116
+ --letter-spacing-negative-xxl: -0.03em;
117
+ --letter-spacing-negative-xxxl: -0.04em;
118
+ --letter-spacing-negative-xxxxl: -0.05em;
119
+ --line-height-18: 1.125rem;
120
+ --line-height-20: 1.25rem;
121
+ --line-height-22: 1.375rem;
122
+ --line-height-24: 1.5rem;
123
+ --line-height-28: 1.75rem;
124
+ --line-height-30: 1.875rem;
125
+ --line-height-32: 2rem;
126
+ --line-height-34: 2.125rem;
127
+ --line-height-36: 2.25rem;
128
+ --line-height-42: 2.625rem;
129
+ --line-height-48: 3rem;
130
+ --line-height-title: 1.2;
131
+ --line-height-body: 1.5;
132
+ --line-height-control: 1.2;
133
+ --font-weight-light: 300;
134
+ --font-weight-regular: 400;
135
+ --font-weight-medium: 500;
136
+ --font-weight-semi-bold: 600;
137
+ --font-weight-bold: 700;
138
+ --font-weight-black: 900;
139
+ --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
140
+ --font-family-display: 'Wise Sans', 'Inter', sans-serif;
141
+ }
package/themes/dark/tokens.less ADDED
@@ -0,0 +1,138 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Fri, 10 May 2024 10:39:19 GMT
4
+
5
+ @color-content-primary: #e2e6e8;
6
+ @color-content-secondary: #c9cbce;
7
+ @color-content-tertiary: #a8aaac;
8
+ @color-content-accent: #00b9ff;
9
+ @color-content-accent-hover: #00a6ea;
10
+ @color-content-accent-active: #0097db;
11
+ @color-content-positive: #6fd698;
12
+ @color-content-positive-hover: #5ac285;
13
+ @color-content-positive-active: #4bb377;
14
+ @color-content-negative: #ffa6a9;
15
+ @color-content-negative-hover: #ea9396;
16
+ @color-content-negative-active: #da8488;
17
+ @color-content-warning: #ffd184;
18
+ @color-content-warning-hover: #e9bd71;
19
+ @color-content-warning-active: #daae63;
20
+ @color-interactive-accent: #00a2dd;
21
+ @color-interactive-accent-hover: #008fc9;
22
+ @color-interactive-accent-active: #0081ba;
23
+ @color-interactive-positive: #2ead4b;
24
+ @color-interactive-positive-hover: #069939;
25
+ @color-interactive-positive-active: #008b2b;
26
+ @color-interactive-negative: #e74848;
27
+ @color-interactive-negative-hover: #d03238;
28
+ @color-interactive-negative-active: #bf1e2c;
29
+ @color-interactive-warning: #df8700;
30
+ @color-interactive-warning-hover: #c97500;
31
+ @color-interactive-warning-active: #b86700;
32
+ @color-interactive-secondary: #a8aaac;
33
+ @color-interactive-secondary-hover: #959799;
34
+ @color-interactive-secondary-active: #87898b;
35
+ @color-background-screen: #181818;
36
+ @color-background-elevated: #202020;
37
+ @color-background-neutral: #86a7bd1a;
38
+ @color-background-accent: #38c8ff1a;
39
+ @color-background-positive: #36c7971a;
40
+ @color-background-negative: #ff87871a;
41
+ @color-background-warning: #ffac001a;
42
+ @color-background-overlay: #ffffff1a;
43
+ @color-border-neutral: #ffffff1a;
44
+ @color-border-overlay: #ffffff1a;
45
+ @color-core-contrast: #ffffff;
46
+ @padding-x-small: 8px;
47
+ @padding-small: 16px;
48
+ @padding-medium: 24px;
49
+ @padding-large: 32px;
50
+ @radius-full: 9999px;
51
+ @radius-small: 10px;
52
+ @radius-medium: 16px;
53
+ @radius-large: 24px;
54
+ @size-4: 4px;
55
+ @size-8: 8px;
56
+ @size-10: 10px;
57
+ @size-12: 12px;
58
+ @size-14: 14px;
59
+ @size-16: 16px;
60
+ @size-24: 24px;
61
+ @size-32: 32px;
62
+ @size-40: 40px;
63
+ @size-48: 48px;
64
+ @size-52: 52px;
65
+ @size-56: 56px;
66
+ @size-60: 60px;
67
+ @size-64: 64px;
68
+ @size-72: 72px;
69
+ @size-80: 80px;
70
+ @size-88: 88px;
71
+ @size-96: 96px;
72
+ @size-104: 104px;
73
+ @size-112: 112px;
74
+ @size-120: 120px;
75
+ @size-126: 126px;
76
+ @size-128: 128px;
77
+ @size-146: 146px;
78
+ @size-154: 154px;
79
+ @size-160: 160px;
80
+ @size-x-small: 24px;
81
+ @size-small: 32px;
82
+ @size-medium: 40px;
83
+ @size-large: 48px;
84
+ @size-x-large: 56px;
85
+ @size-2x-large: 72px;
86
+ @space-content-horizontal: 16px;
87
+ @space-small: 16px;
88
+ @space-medium: 32px;
89
+ @space-large: 40px;
90
+ @space-x-large: 56px;
91
+ @font-size-12: 0.75rem;
92
+ @font-size-14: 0.875rem;
93
+ @font-size-16: 1rem;
94
+ @font-size-18: 1.125rem;
95
+ @font-size-20: 1.25rem;
96
+ @font-size-22: 1.375rem;
97
+ @font-size-24: 1.5rem;
98
+ @font-size-26: 1.625rem;
99
+ @font-size-28: 1.75rem;
100
+ @font-size-30: 1.875rem;
101
+ @font-size-32: 2rem;
102
+ @letter-spacing-xxs: 0.005em;
103
+ @letter-spacing-xs: 0.01em;
104
+ @letter-spacing-sm: 0.0125em;
105
+ @letter-spacing-md: 0.015em;
106
+ @letter-spacing-lg: 0.02em;
107
+ @letter-spacing-xl: 0.025em;
108
+ @letter-spacing-negative-xxs: -0.005em;
109
+ @letter-spacing-negative-xs: -0.01em;
110
+ @letter-spacing-negative-sm: -0.0125em;
111
+ @letter-spacing-negative-md: -0.015em;
112
+ @letter-spacing-negative-lg: -0.02em;
113
+ @letter-spacing-negative-xl: -0.025em;
114
+ @letter-spacing-negative-xxl: -0.03em;
115
+ @letter-spacing-negative-xxxl: -0.04em;
116
+ @letter-spacing-negative-xxxxl: -0.05em;
117
+ @line-height-18: 1.125rem;
118
+ @line-height-20: 1.25rem;
119
+ @line-height-22: 1.375rem;
120
+ @line-height-24: 1.5rem;
121
+ @line-height-28: 1.75rem;
122
+ @line-height-30: 1.875rem;
123
+ @line-height-32: 2rem;
124
+ @line-height-34: 2.125rem;
125
+ @line-height-36: 2.25rem;
126
+ @line-height-42: 2.625rem;
127
+ @line-height-48: 3rem;
128
+ @line-height-title: 1.2;
129
+ @line-height-body: 1.5;
130
+ @line-height-control: 1.2;
131
+ @font-weight-light: 300;
132
+ @font-weight-regular: 400;
133
+ @font-weight-medium: 500;
134
+ @font-weight-semi-bold: 600;
135
+ @font-weight-bold: 700;
136
+ @font-weight-black: 900;
137
+ @font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
138
+ @font-family-display: 'Wise Sans', 'Inter', sans-serif;
package/themes/light/tokens.css ADDED
@@ -0,0 +1,141 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Fri, 10 May 2024 10:39:19 GMT
4
+ */
5
+
6
+ .np-theme-light {
7
+ --color-content-primary: #37517e;
8
+ --color-content-secondary: #5d7079;
9
+ --color-content-tertiary: #768e9c;
10
+ --color-content-accent: #0097c7;
11
+ --color-content-accent-hover: #0084b3;
12
+ --color-content-accent-active: #0077a5;
13
+ --color-content-positive: #008026;
14
+ --color-content-positive-hover: #006d13;
15
+ --color-content-positive-active: #006002;
16
+ --color-content-negative: #cf2929;
17
+ --color-content-negative-hover: #b80419;
18
+ --color-content-negative-active: #a7000d;
19
+ --color-content-warning: #9a6500;
20
+ --color-content-warning-hover: #855400;
21
+ --color-content-warning-active: #764700;
22
+ --color-interactive-accent: #00a2dd;
23
+ --color-interactive-accent-hover: #008fc9;
24
+ --color-interactive-accent-active: #0081ba;
25
+ --color-interactive-positive: #2ead4b;
26
+ --color-interactive-positive-hover: #069939;
27
+ --color-interactive-positive-active: #008b2b;
28
+ --color-interactive-negative: #e74848;
29
+ --color-interactive-negative-hover: #d03238;
30
+ --color-interactive-negative-active: #bf1e2c;
31
+ --color-interactive-warning: #df8700;
32
+ --color-interactive-warning-hover: #c97500;
33
+ --color-interactive-warning-active: #b86700;
34
+ --color-interactive-secondary: #c9cbce;
35
+ --color-interactive-secondary-hover: #b5b7ba;
36
+ --color-interactive-secondary-active: #a7a9ab;
37
+ --color-background-screen: #ffffff;
38
+ --color-background-elevated: #ffffff;
39
+ --color-background-neutral: #86a7bd1a;
40
+ --color-background-accent: #38c8ff1a;
41
+ --color-background-positive: #36c7971a;
42
+ --color-background-negative: #ff87871a;
43
+ --color-background-warning: #ffac001a;
44
+ --color-background-overlay: #0000001a;
45
+ --color-border-neutral: #0000001a;
46
+ --color-border-overlay: #0000001a;
47
+ --color-core-contrast: #000000;
48
+ --padding-x-small: 8px;
49
+ --padding-small: 16px;
50
+ --padding-medium: 24px;
51
+ --padding-large: 32px;
52
+ --radius-full: 9999px;
53
+ --radius-small: 10px;
54
+ --radius-medium: 16px;
55
+ --radius-large: 24px;
56
+ --size-4: 4px;
57
+ --size-8: 8px;
58
+ --size-10: 10px;
59
+ --size-12: 12px;
60
+ --size-14: 14px;
61
+ --size-16: 16px;
62
+ --size-24: 24px;
63
+ --size-32: 32px;
64
+ --size-40: 40px;
65
+ --size-48: 48px;
66
+ --size-52: 52px;
67
+ --size-56: 56px;
68
+ --size-60: 60px;
69
+ --size-64: 64px;
70
+ --size-72: 72px;
71
+ --size-80: 80px;
72
+ --size-88: 88px;
73
+ --size-96: 96px;
74
+ --size-104: 104px;
75
+ --size-112: 112px;
76
+ --size-120: 120px;
77
+ --size-126: 126px;
78
+ --size-128: 128px;
79
+ --size-146: 146px;
80
+ --size-154: 154px;
81
+ --size-160: 160px;
82
+ --size-x-small: 24px;
83
+ --size-small: 32px;
84
+ --size-medium: 40px;
85
+ --size-large: 48px;
86
+ --size-x-large: 56px;
87
+ --size-2x-large: 72px;
88
+ --space-content-horizontal: 16px;
89
+ --space-small: 16px;
90
+ --space-medium: 32px;
91
+ --space-large: 40px;
92
+ --space-x-large: 56px;
93
+ --font-size-12: 0.75rem;
94
+ --font-size-14: 0.875rem;
95
+ --font-size-16: 1rem;
96
+ --font-size-18: 1.125rem;
97
+ --font-size-20: 1.25rem;
98
+ --font-size-22: 1.375rem;
99
+ --font-size-24: 1.5rem;
100
+ --font-size-26: 1.625rem;
101
+ --font-size-28: 1.75rem;
102
+ --font-size-30: 1.875rem;
103
+ --font-size-32: 2rem;
104
+ --letter-spacing-xxs: 0.005em;
105
+ --letter-spacing-xs: 0.01em;
106
+ --letter-spacing-sm: 0.0125em;
107
+ --letter-spacing-md: 0.015em;
108
+ --letter-spacing-lg: 0.02em;
109
+ --letter-spacing-xl: 0.025em;
110
+ --letter-spacing-negative-xxs: -0.005em;
111
+ --letter-spacing-negative-xs: -0.01em;
112
+ --letter-spacing-negative-sm: -0.0125em;
113
+ --letter-spacing-negative-md: -0.015em;
114
+ --letter-spacing-negative-lg: -0.02em;
115
+ --letter-spacing-negative-xl: -0.025em;
116
+ --letter-spacing-negative-xxl: -0.03em;
117
+ --letter-spacing-negative-xxxl: -0.04em;
118
+ --letter-spacing-negative-xxxxl: -0.05em;
119
+ --line-height-18: 1.125rem;
120
+ --line-height-20: 1.25rem;
121
+ --line-height-22: 1.375rem;
122
+ --line-height-24: 1.5rem;
123
+ --line-height-28: 1.75rem;
124
+ --line-height-30: 1.875rem;
125
+ --line-height-32: 2rem;
126
+ --line-height-34: 2.125rem;
127
+ --line-height-36: 2.25rem;
128
+ --line-height-42: 2.625rem;
129
+ --line-height-48: 3rem;
130
+ --line-height-title: 1.2;
131
+ --line-height-body: 1.5;
132
+ --line-height-control: 1.2;
133
+ --font-weight-light: 300;
134
+ --font-weight-regular: 400;
135
+ --font-weight-medium: 500;
136
+ --font-weight-semi-bold: 600;
137
+ --font-weight-bold: 700;
138
+ --font-weight-black: 900;
139
+ --font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
140
+ --font-family-display: 'Wise Sans', 'Inter', sans-serif;
141
+ }
package/themes/light/tokens.less ADDED
@@ -0,0 +1,138 @@
1
+
2
+ // Do not edit directly
3
+ // Generated on Fri, 10 May 2024 10:39:19 GMT
4
+
5
+ @color-content-primary: #37517e;
6
+ @color-content-secondary: #5d7079;
7
+ @color-content-tertiary: #768e9c;
8
+ @color-content-accent: #0097c7;
9
+ @color-content-accent-hover: #0084b3;
10
+ @color-content-accent-active: #0077a5;
11
+ @color-content-positive: #008026;
12
+ @color-content-positive-hover: #006d13;
13
+ @color-content-positive-active: #006002;
14
+ @color-content-negative: #cf2929;
15
+ @color-content-negative-hover: #b80419;
16
+ @color-content-negative-active: #a7000d;
17
+ @color-content-warning: #9a6500;
18
+ @color-content-warning-hover: #855400;
19
+ @color-content-warning-active: #764700;
20
+ @color-interactive-accent: #00a2dd;
21
+ @color-interactive-accent-hover: #008fc9;
22
+ @color-interactive-accent-active: #0081ba;
23
+ @color-interactive-positive: #2ead4b;
24
+ @color-interactive-positive-hover: #069939;
25
+ @color-interactive-positive-active: #008b2b;
26
+ @color-interactive-negative: #e74848;
27
+ @color-interactive-negative-hover: #d03238;
28
+ @color-interactive-negative-active: #bf1e2c;
29
+ @color-interactive-warning: #df8700;
30
+ @color-interactive-warning-hover: #c97500;
31
+ @color-interactive-warning-active: #b86700;
32
+ @color-interactive-secondary: #c9cbce;
33
+ @color-interactive-secondary-hover: #b5b7ba;
34
+ @color-interactive-secondary-active: #a7a9ab;
35
+ @color-background-screen: #ffffff;
36
+ @color-background-elevated: #ffffff;
37
+ @color-background-neutral: #86a7bd1a;
38
+ @color-background-accent: #38c8ff1a;
39
+ @color-background-positive: #36c7971a;
40
+ @color-background-negative: #ff87871a;
41
+ @color-background-warning: #ffac001a;
42
+ @color-background-overlay: #0000001a;
43
+ @color-border-neutral: #0000001a;
44
+ @color-border-overlay: #0000001a;
45
+ @color-core-contrast: #000000;
46
+ @padding-x-small: 8px;
47
+ @padding-small: 16px;
48
+ @padding-medium: 24px;
49
+ @padding-large: 32px;
50
+ @radius-full: 9999px;
51
+ @radius-small: 10px;
52
+ @radius-medium: 16px;
53
+ @radius-large: 24px;
54
+ @size-4: 4px;
55
+ @size-8: 8px;
56
+ @size-10: 10px;
57
+ @size-12: 12px;
58
+ @size-14: 14px;
59
+ @size-16: 16px;
60
+ @size-24: 24px;
61
+ @size-32: 32px;
62
+ @size-40: 40px;
63
+ @size-48: 48px;
64
+ @size-52: 52px;
65
+ @size-56: 56px;
66
+ @size-60: 60px;
67
+ @size-64: 64px;
68
+ @size-72: 72px;
69
+ @size-80: 80px;
70
+ @size-88: 88px;
71
+ @size-96: 96px;
72
+ @size-104: 104px;
73
+ @size-112: 112px;
74
+ @size-120: 120px;
75
+ @size-126: 126px;
76
+ @size-128: 128px;
77
+ @size-146: 146px;
78
+ @size-154: 154px;
79
+ @size-160: 160px;
80
+ @size-x-small: 24px;
81
+ @size-small: 32px;
82
+ @size-medium: 40px;
83
+ @size-large: 48px;
84
+ @size-x-large: 56px;
85
+ @size-2x-large: 72px;
86
+ @space-content-horizontal: 16px;
87
+ @space-small: 16px;
88
+ @space-medium: 32px;
89
+ @space-large: 40px;
90
+ @space-x-large: 56px;
91
+ @font-size-12: 0.75rem;
92
+ @font-size-14: 0.875rem;
93
+ @font-size-16: 1rem;
94
+ @font-size-18: 1.125rem;
95
+ @font-size-20: 1.25rem;
96
+ @font-size-22: 1.375rem;
97
+ @font-size-24: 1.5rem;
98
+ @font-size-26: 1.625rem;
99
+ @font-size-28: 1.75rem;
100
+ @font-size-30: 1.875rem;
101
+ @font-size-32: 2rem;
102
+ @letter-spacing-xxs: 0.005em;
103
+ @letter-spacing-xs: 0.01em;
104
+ @letter-spacing-sm: 0.0125em;
105
+ @letter-spacing-md: 0.015em;
106
+ @letter-spacing-lg: 0.02em;
107
+ @letter-spacing-xl: 0.025em;
108
+ @letter-spacing-negative-xxs: -0.005em;
109
+ @letter-spacing-negative-xs: -0.01em;
110
+ @letter-spacing-negative-sm: -0.0125em;
111
+ @letter-spacing-negative-md: -0.015em;
112
+ @letter-spacing-negative-lg: -0.02em;
113
+ @letter-spacing-negative-xl: -0.025em;
114
+ @letter-spacing-negative-xxl: -0.03em;
115
+ @letter-spacing-negative-xxxl: -0.04em;
116
+ @letter-spacing-negative-xxxxl: -0.05em;
117
+ @line-height-18: 1.125rem;
118
+ @line-height-20: 1.25rem;
119
+ @line-height-22: 1.375rem;
120
+ @line-height-24: 1.5rem;
121
+ @line-height-28: 1.75rem;
122
+ @line-height-30: 1.875rem;
123
+ @line-height-32: 2rem;
124
+ @line-height-34: 2.125rem;
125
+ @line-height-36: 2.25rem;
126
+ @line-height-42: 2.625rem;
127
+ @line-height-48: 3rem;
128
+ @line-height-title: 1.2;
129
+ @line-height-body: 1.5;
130
+ @line-height-control: 1.2;
131
+ @font-weight-light: 300;
132
+ @font-weight-regular: 400;
133
+ @font-weight-medium: 500;
134
+ @font-weight-semi-bold: 600;
135
+ @font-weight-bold: 700;
136
+ @font-weight-black: 900;
137
+ @font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
138
+ @font-family-display: 'Wise Sans', 'Inter', sans-serif;