Skip to content

Commit 2fea4f8

Browse files
Jordan-MystenJordan-Mysten
authored
Create shared Tailwind configuration (MystenLabs#5281)
1 parent 3c2c4eb commit 2fea4f8

File tree

11 files changed

+228
-125
lines changed

11 files changed

+228
-125
lines changed

‎.changeset/config.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,11 @@
77
"access": "public",
88
"baseBranch": "main",
99
"updateInternalDependencies": "minor",
10-
"ignore": ["sui-explorer", "sui-wallet", "demo-nft-dapp", "sui-wallet-adapter"]
10+
"ignore": [
11+
"sui-explorer",
12+
"sui-wallet",
13+
"demo-nft-dapp",
14+
"sui-wallet-adapter",
15+
"@mysten/core"
16+
]
1117
}

‎apps/core/package.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"name": "@mysten/core",
3+
"private": true,
4+
"devDependencies": {
5+
"@headlessui/tailwindcss": "^0.1.1",
6+
"@tailwindcss/aspect-ratio": "^0.4.2",
7+
"tailwindcss": "^3.0.23"
8+
}
9+
}

‎apps/core/tailwind.config.js

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
// Copyright (c) Mysten Labs, Inc.
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
const defaultTheme = require("tailwindcss/defaultTheme");
5+
6+
module.exports = {
7+
content: ["./src/**/*.{js,jsx,ts,tsx}"],
8+
theme: {
9+
extend: {
10+
// Line-heights that are found in the design:
11+
lineHeight: {
12+
80: "0.8",
13+
100: "1",
14+
130: "1.3",
15+
},
16+
fontSize: {
17+
// Text sizes:
18+
body: ["14px", "1"],
19+
bodySmall: ["13px", "1"],
20+
subtitle: ["12px", "1"],
21+
subtitleSmall: ["11px", "1"],
22+
subtitleSmallExtra: ["10px", "1"],
23+
caption: ["12px", "1"],
24+
captionSmall: ["11px", "1"],
25+
26+
// Heading sizes:
27+
heading1: ["28px", "0.8"],
28+
heading2: ["24px", "0.8"],
29+
heading3: ["20px", "1"],
30+
heading4: ["18px", "1"],
31+
heading5: ["17px", "1"],
32+
heading6: ["16px", "1"],
33+
34+
// Paragraph sizes:
35+
p1: ["14px", "1.3"],
36+
p2: ["13px", "1.3"],
37+
p3: ["12px", "1.3"],
38+
p4: ["11px", "1.3"],
39+
},
40+
fontFamily: {
41+
sans: ["Inter", ...defaultTheme.fontFamily.sans],
42+
mono: ["Space Mono", ...defaultTheme.fontFamily.mono],
43+
},
44+
colors: {
45+
sui: {
46+
dark: "#1F6493",
47+
DEFAULT: "#6fbcf0",
48+
light: "#E1F3FF",
49+
steel: {
50+
DEFAULT: "#A0B6C3",
51+
dark: "#758F9E",
52+
darker: "#627885",
53+
},
54+
// TODO: Replace default gray palette with this:
55+
grey: {
56+
100: "#182435",
57+
95: "#2A3645",
58+
90: "#3D444D",
59+
85: "#4E555D",
60+
80: "#636870",
61+
75: "#767A81",
62+
70: "#898D93",
63+
65: "#9C9FA4",
64+
60: "#C3C5C8",
65+
55: "#D7D8DA",
66+
50: "#E9EAEB",
67+
45: "#F0F1F2",
68+
40: "#F7F8F8",
69+
35: "#FEFEFE",
70+
},
71+
},
72+
issue: {
73+
DEFAULT: "#FF794B",
74+
dark: "#EB5A29",
75+
light: "#FFECE5",
76+
},
77+
hero: {
78+
DEFAULT: "#0284AD",
79+
dark: "#007195",
80+
},
81+
success: {
82+
DEFAULT: "#2DD7A7",
83+
dark: "#008C65",
84+
light: "#D5F7EE",
85+
},
86+
warning: {
87+
DEFAULT: "#F2BD24",
88+
dark: "#8D6E15",
89+
light: "#FFF8E2",
90+
},
91+
headerNav: "#2A4362",
92+
search: {
93+
fill: "#162A43",
94+
},
95+
offwhite: "#fefefe",
96+
offblack: "#111111",
97+
},
98+
},
99+
},
100+
corePlugins: {
101+
aspectRatio: false,
102+
},
103+
plugins: [
104+
require("@headlessui/tailwindcss"),
105+
require("@tailwindcss/aspect-ratio"),
106+
],
107+
};

‎apps/explorer/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,10 @@
2424
"preview-storybook": "pnpm dlx serve ./storybook-static -l 6007"
2525
},
2626
"dependencies": {
27+
"@mysten/core": "workspace:*",
2728
"@growthbook/growthbook": "^0.18.1",
2829
"@growthbook/growthbook-react": "^0.9.1",
2930
"@headlessui/react": "^1.7.2",
30-
"@headlessui/tailwindcss": "^0.1.1",
3131
"@mysten/sui.js": "workspace:*",
3232
"@sentry/react": "^7.6.0",
3333
"@sentry/tracing": "^7.6.0",

‎apps/explorer/tailwind.config.js

Lines changed: 1 addition & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,4 @@
11
// Copyright (c) Mysten Labs, Inc.
22
// SPDX-License-Identifier: Apache-2.0
33

4-
const defaultTheme = require('tailwindcss/defaultTheme');
5-
6-
module.exports = {
7-
content: ['./src/**/*.{js,jsx,ts,tsx}'],
8-
theme: {
9-
extend: {
10-
// Line-heights that are found in the design:
11-
lineHeight: {
12-
80: '0.8',
13-
100: '1',
14-
130: '1.3',
15-
},
16-
fontSize: {
17-
// Text sizes:
18-
body: ['14px', '1'],
19-
bodySmall: ['13px', '1'],
20-
subtitle: ['12px', '1'],
21-
subtitleSmall: ['11px', '1'],
22-
subtitleSmallExtra: ['10px', '1'],
23-
caption: ['12px', '1'],
24-
captionSmall: ['11px', '1'],
25-
26-
// Heading sizes:
27-
heading1: ['28px', '0.8'],
28-
heading2: ['24px', '0.8'],
29-
heading3: ['20px', '1'],
30-
heading4: ['18px', '1'],
31-
heading5: ['17px', '1'],
32-
heading6: ['16px', '1'],
33-
34-
// Paragraph sizes:
35-
p1: ['14px', '1.3'],
36-
p2: ['13px', '1.3'],
37-
p3: ['12px', '1.3'],
38-
p4: ['11px', '1.3'],
39-
},
40-
fontFamily: {
41-
sans: ['Inter', ...defaultTheme.fontFamily.sans],
42-
mono: ['Space Mono', ...defaultTheme.fontFamily.mono],
43-
},
44-
colors: {
45-
sui: {
46-
dark: '#1F6493',
47-
DEFAULT: '#6fbcf0',
48-
light: '#E1F3FF',
49-
steel: {
50-
DEFAULT: '#A0B6C3',
51-
dark: '#758F9E',
52-
darker: '#627885',
53-
},
54-
// TODO: Replace default gray palette with this:
55-
grey: {
56-
100: '#182435',
57-
95: '#2A3645',
58-
90: '#3D444D',
59-
85: '#4E555D',
60-
80: '#636870',
61-
75: '#767A81',
62-
70: '#898D93',
63-
65: '#9C9FA4',
64-
60: '#C3C5C8',
65-
55: '#D7D8DA',
66-
50: '#E9EAEB',
67-
45: '#F0F1F2',
68-
40: '#F7F8F8',
69-
35: '#FEFEFE',
70-
},
71-
},
72-
issue: {
73-
DEFAULT: '#FF794B',
74-
dark: '#EB5A29',
75-
light: '#FFECE5',
76-
},
77-
hero: {
78-
DEFAULT: '#0284AD',
79-
dark: '#007195',
80-
},
81-
success: {
82-
DEFAULT: '#2DD7A7',
83-
dark: '#008C65',
84-
light: '#D5F7EE',
85-
},
86-
warning: {
87-
DEFAULT: '#F2BD24',
88-
dark: '#8D6E15',
89-
light: '#FFF8E2',
90-
},
91-
headerNav: '#2A4362',
92-
search: {
93-
fill: '#162A43',
94-
},
95-
offwhite: '#fefefe',
96-
offblack: '#111111',
97-
},
98-
},
99-
},
100-
plugins: [require('@headlessui/tailwindcss')],
101-
};
4+
module.exports = require('@mysten/core/tailwind.config');

‎apps/wallet/.stylelintrc.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@
33
"stylelint-config-standard-scss",
44
"stylelint-config-prettier-scss"
55
],
6+
"rules": {
7+
"scss/at-rule-no-unknown": [
8+
true,
9+
{
10+
"ignoreAtRules": ["tailwind"]
11+
}
12+
]
13+
},
614
"overrides": [
715
{
816
"files": ["**/*.module.scss"],

‎apps/wallet/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@
8484
"@floating-ui/react-dom-interactions": "^0.10.1",
8585
"@growthbook/growthbook": "^0.18.1",
8686
"@metamask/browser-passworder": "^3.0.0",
87+
"@mysten/core": "workspace:*",
8788
"@mysten/sui.js": "workspace:*",
8889
"@mysten/wallet-standard": "workspace:*",
8990
"@reduxjs/toolkit": "^1.8.3",
@@ -106,6 +107,7 @@
106107
"rxjs": "^7.5.6",
107108
"semver": "^7.3.8",
108109
"stream-browserify": "^3.0.0",
110+
"tailwindcss": "^3.0.23",
109111
"tweetnacl": "^1.0.3",
110112
"uuid": "^8.3.2",
111113
"webextension-polyfill": "^0.9.0",

‎apps/wallet/postcss.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@
22
// SPDX-License-Identifier: Apache-2.0
33

44
module.exports = {
5-
plugins: ['postcss-preset-env'],
5+
plugins: ['postcss-preset-env', 'tailwindcss'],
66
};

‎apps/wallet/src/ui/styles/global.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
@use './themes';
22
@use '_variables' as v;
33

4+
/*
5+
* NOTE: The Tailwind CSS reset doesn't mix well with the existing styles.
6+
* We currently disable the CSS reset and expect components to adapt accordingly.
7+
* When we fix this, we should use the following as a CSS reset: @tailwind base;
8+
*/
9+
10+
@tailwind components;
11+
@tailwind utilities;
12+
413
@font-face {
514
font-family: Inter;
615
font-style: normal;

‎apps/wallet/tailwind.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// Copyright (c) Mysten Labs, Inc.
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
module.exports = require('@mysten/core/tailwind.config');

0 commit comments

Comments
 (0)